NMLTutorial/32 bit base graphics
In this example we'll look into a small base graphics replacement, for both 8 bit and 32 bit graphics. We'll be replacing some level crossings in temperate and actic climate.
Example graphics
There will be three sets of graphics: regular 8 bit sprites, 32 bit sprites for the normal zoom level and an accompanying mask file. These graphics will be replacing sprites 1370 to 1373. The sprites for the arctic climate will occupy the same slots.
Here are the 8 bit sprites. Note that they're neatly ordered, so that we can use a template later on.
The 32 bit sprites are very similar, but with a transparent instead of blue background. The pink bits are just to indicate the sprite borders.
In order to get animation for the crossing lights with the 32 bit version, we need an additional mask file. This mask just contains the crossing lights in the exact positions as in the 32 bit file. This is an 8 bit file, so we have to use the blue background to indicate transparency.
Replace
Let's start with the replace blocks for the 8 bit sprites. We'll add the 32 bit sprites later.
replace replace_levelcrossings_temperate(1370, "gfx/levelcrossings.png") {
//realsprites go here
}
We've chosen the identifier replace_levelcrossings_temperate. It's not mandatory for 8 bit sprites alone, but we need it if we want to attach 32 bit sprites later. So why not add it straight away, right? The 1370 is the sprite number of the first sprite we want to replace.
Template
As stated before, we want to template these sprites. There are four sprites for each climate, all with the same offsets because all sprite boxes are the same size, so the template will be pretty straightforward:
template template_levelcrossing(x, y) {
//[left_x, upper_y, width, height, offset_x, offset_y]
[x , y, 64, 42, -31, -11]
[x+80 , y, 64, 42, -31, -11]
[x+160, y, 64, 42, -31, -11]
[x+240, y, 64, 42, -31, -11]
}
The x and y position are variable in the template, because we have the sprites for both climates in one file. Now it's just a matter of referencing our template inside the replace block and filling in the correct position of the top left pixel of the first sprite:
replace replace_levelcrossings_temperate(1370, "gfx/levelcrossings.png") {
template_levelcrossing(0, 0)
}
Other climate
The procedure for the actic climate will be identical, but we need to select the correct sprites depending on the selected climate. This means guarding the two replace blocks with if-statements. Let's look at those if-statements first:
if (climate == CLIMATE_TEMPERATE) {
replace replace_levelcrossings_temperate(1370, "gfx/levelcrossings.png") {
template_levelcrossing(0, 0)
}
}
if (climate == CLIMATE_ARCTIC) {
replace replace_levelcrossings_arctic(1370, "gfx/levelcrossings.png") {
template_levelcrossing(0, 320)
}
}
You may use an else in front of the second if block, but that's not really necessary in this case. From here it's just a matter of adding the replace block for the temperate climate and writing a similar one for the arctic climate. The one for the arctic climate will of course get a different identifier and different template parameters:
if (climate == CLIMATE_TEMPERATE) {
//replace block for temperate to go here
}
if (climate == CLIMATE_ARCTIC) {
//replace block for temperate to go here
}
And this is actually all there is to it, if you just want 8 bit sprites. We'll leave adding a grf block and the language file over to you. It's no different than for the road vehicle.
32 bit graphics
To define our 32 bit sprites, we have to define an alternative_sprites block to go with each of the spriteset blocks. The identifiers will be the same, we'll indicate that we have normal zoom sprites via ZOOM_LEVEL_NORMAL and that the sprites are 32 bit via BIT_DEPTH_32BPP.
We'll also reference the new graphics files. As the 32 bit sprites and the mask sprites belong together, they go together in in the same alternative_sprites block. Let's look at the first line of that block:
alternative_sprites(spriteset_flatbed_truck_1_goods_empty, ZOOM_LEVEL_NORMAL, BIT_DEPTH_32BPP, "flatbed_truck_1_goods_32.png", "flatbed_truck_1_goods_mask.png") {
The positions, sizes and offsets of 32 bit sprites are incidentally the same as for the 8 bit sprites. Coincidence? Of course not, this will just save us a lot of trouble, as now we can simply copy these from the 8 bit sprites. This will give us the following alternative_sprites block for the first set of sprites:
alternative_sprites(spriteset_flatbed_truck_1_goods_empty, ZOOM_LEVEL_NORMAL, BIT_DEPTH_32BPP, "flatbed_truck_1_goods_32.png", "flatbed_truck_1_goods_mask.png") {
//left_x, upper_y, width, height, offset_x, offset_y
[ 0, 0, 8, 18, -3, -10]
[ 16, 0, 20, 16, -14, -7]
[ 48, 0, 28, 12, -14, -6]
[ 96, 0, 20, 16, -6, -7]
[ 128, 0, 8, 18, -3, -10]
[ 144, 0, 20, 16, -14, -7]
[ 176, 0, 28, 12, -14, -6]
[ 224, 0, 20, 16, -6, -7]
}
It is good practice to place the alternative_sprites block right after the spriteset block it belongs to. Let's do that and at the same time fill in the other alternative_sprites block.
//graphics definition
spriteset(spriteset_flatbed_truck_1_goods_empty, "gfx/flatbed_truck_1_goods.png") {
//left_x, upper_y, width, height, offset_x, offset_y
[ 0, 0, 8, 18, -3, -10]
[ 16, 0, 20, 16, -14, -7]
[ 48, 0, 28, 12, -14, -6]
[ 96, 0, 20, 16, -6, -7]
[ 128, 0, 8, 18, -3, -10]
[ 144, 0, 20, 16, -14, -7]
[ 176, 0, 28, 12, -14, -6]
[ 224, 0, 20, 16, -6, -7]
}
alternative_sprites(spriteset_flatbed_truck_1_goods_empty, ZOOM_LEVEL_NORMAL, BIT_DEPTH_32BPP, "flatbed_truck_1_goods_32.png", "flatbed_truck_1_goods_mask.png") {
//left_x, upper_y, width, height, offset_x, offset_y
[ 0, 0, 8, 18, -3, -10]
[ 16, 0, 20, 16, -14, -7]
[ 48, 0, 28, 12, -14, -6]
[ 96, 0, 20, 16, -6, -7]
[ 128, 0, 8, 18, -3, -10]
[ 144, 0, 20, 16, -14, -7]
[ 176, 0, 28, 12, -14, -6]
[ 224, 0, 20, 16, -6, -7]
}
spriteset(spriteset_flatbed_truck_1_goods_full, "gfx/flatbed_truck_1_goods.png") {
//left_x, upper_y, width, height, offset_x, offset_y
[ 260, 0, 8, 18, -3, -10]
[ 276, 0, 20, 16, -14, -7]
[ 308, 0, 28, 12, -14, -6]
[ 356, 0, 20, 16, -6, -7]
[ 388, 0, 8, 18, -3, -10]
[ 404, 0, 20, 16, -14, -7]
[ 436, 0, 28, 12, -14, -6]
[ 484, 0, 20, 16, -6, -7]
}
alternative_sprites(spriteset_flatbed_truck_1_goods_full, ZOOM_LEVEL_NORMAL, BIT_DEPTH_32BPP, "flatbed_truck_1_goods_32.png", "flatbed_truck_1_goods_mask.png") {
//left_x, upper_y, width, height, offset_x, offset_y
[ 260, 0, 8, 18, -3, -10]
[ 276, 0, 20, 16, -14, -7]
[ 308, 0, 28, 12, -14, -6]
[ 356, 0, 20, 16, -6, -7]
[ 388, 0, 8, 18, -3, -10]
[ 404, 0, 20, 16, -14, -7]
[ 436, 0, 28, 12, -14, -6]
[ 484, 0, 20, 16, -6, -7]
}
And that's really all there is to defining 32 bit sprites!
Templates
Can we also template 32 bit graphics, I hear you ask? Well certainly, they're no different than 8 bit sprites in that respect. Let's go back to where we've templated our example road vehicle. Because we were smart enough to keep the same positions, sizes and offsets for both our 8 bit and 32 bit sprites, we can simply use the same template we made earlier. This template was called tmpl_truck and has template parameters for the top left position of the first of eight sprites.
When first using this template, we simply replaced all the numbers inside the spriteset blocks with a call to the template, and ended up with this:
//graphics definition
spriteset(spriteset_flatbed_truck_1_goods_empty, "gfx/flatbed_truck_1_goods.png") {
tmpl_truck(0, 0)
}
spriteset(spriteset_flatbed_truck_1_goods_full, "gfx/flatbed_truck_1_goods.png") {
tmpl_truck(260, 0)
}
For our alternative_sprites blocks we can do the same, there's really nothing to it:
//graphics definition
spriteset(spriteset_flatbed_truck_1_goods_empty, "gfx/flatbed_truck_1_goods.png") {
tmpl_truck(0, 0)
}
alternative_sprites(spriteset_flatbed_truck_1_goods_empty, ZOOM_LEVEL_NORMAL, BIT_DEPTH_32BPP, "flatbed_truck_1_goods_32.png", "flatbed_truck_1_goods_mask.png") {
tmpl_truck(0, 0)
}
spriteset(spriteset_flatbed_truck_1_goods_full, "gfx/flatbed_truck_1_goods.png") {
tmpl_truck(260, 0)
}
alternative_sprites(spriteset_flatbed_truck_1_goods_full, ZOOM_LEVEL_NORMAL, BIT_DEPTH_32BPP, "flatbed_truck_1_goods_32.png", "flatbed_truck_1_goods_mask.png") {
tmpl_truck(260, 0)
}
So the first line of the blocks remains the same, we just replace the content with the template call.
Other zoom levels
For each additional zoom level, you simply add additional alternative_sprites blocks. Because of the different sprite sizes and offsets, you do have to create an additional template for each additional zoom level. If you order the sprites in a standardized way in your png files, you can keep reusing templates as we've done before.
Let's assume we have 32 bit graphics for the 4x zoom in level. The alternative_sprites for these sprites will be similar, but you specify the different zoom level (in this case) via ZOOM_LEVEL_IN_4X and reference the template you have made for sprites of this zoom level. For the first set of sprites you then get this additional alternative_sprites block:
alternative_sprites(spriteset_flatbed_truck_1_goods_empty, ZOOM_LEVEL_IN_4X, BIT_DEPTH_32BPP, "flatbed_truck_1_goods_32.png", "flatbed_truck_1_goods_mask.png") {
tmpl_truck_zi4(0, 0)
}
And the total set of blocks:
//graphics definition
spriteset(spriteset_flatbed_truck_1_goods_empty, "gfx/flatbed_truck_1_goods.png") {
tmpl_truck(0, 0)
}
alternative_sprites(spriteset_flatbed_truck_1_goods_empty, ZOOM_LEVEL_NORMAL, BIT_DEPTH_32BPP, "flatbed_truck_1_goods_32.png", "flatbed_truck_1_goods_mask.png") {
tmpl_truck(0, 0)
}
alternative_sprites(spriteset_flatbed_truck_1_goods_empty, ZOOM_LEVEL_IN_4X, BIT_DEPTH_32BPP, "flatbed_truck_1_goods_32.png", "flatbed_truck_1_goods_mask.png") {
tmpl_truck_zi4(0, 0)
}
spriteset(spriteset_flatbed_truck_1_goods_full, "gfx/flatbed_truck_1_goods.png") {
tmpl_truck(260, 0)
}
alternative_sprites(spriteset_flatbed_truck_1_goods_full, ZOOM_LEVEL_NORMAL, BIT_DEPTH_32BPP, "flatbed_truck_1_goods_32.png", "flatbed_truck_1_goods_mask.png") {
tmpl_truck(260, 0)
}
alternative_sprites(spriteset_flatbed_truck_1_goods_full, ZOOM_LEVEL_IN_4X, BIT_DEPTH_32BPP, "flatbed_truck_1_goods_32.png", "flatbed_truck_1_goods_mask.png") {
tmpl_truck_zi4(260, 0)
}
And with that we conclude this example and in fact the whole series! Feel free to read the conclusion. Or not.
NML Tutorial: 32 bit base graphics
