FooBar: complete page

2012-06-27T12:07:15Z

complete page

FooBar: intermediate save

2012-06-27T11:44:42Z

intermediate save

New page

{{NMLTutorial}}

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 [[:File:Ogfx1_base.png|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.
[[File:Levelcrossings8.png|frame|none|levelcrossings8.png - Level crossing sprites in open and closed state, for two climates. 8 bit.]]

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.
[[File:Levelcrossings32.png|frame|none|levelcrossings32.png - Level crossing sprites in open and closed state, for two climates. 32 bit.]]

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.
[[File:Levelcrossingsmask.png|frame|none|levelcrossingsmask.png - Mask file for 32 bit sprites. 8 bit.]]

== Replace ==
Let's start with the replace blocks for the 8 bit sprites. We'll add the 32 bit sprites later.

<pre style="color:darkblue; white-space: pre-wrap">
replace replace_levelcrossings_temperate(1370, "gfx/levelcrossings.png") {
//realsprites go here
}
</pre>

We've chosen the identifier <code>replace_levelcrossings_temperate</code>. 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 <code>1370</code> 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:

<pre style="color:darkblue; white-space: pre-wrap">
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]
}
</pre>

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 <code>replace</code> block and filling in the correct position of the top left pixel of the first sprite:

<pre style="color:darkblue; white-space: pre-wrap">
replace replace_levelcrossings_temperate(1370, "gfx/levelcrossings.png") {
template_levelcrossing(0, 0)
}
</pre>

=== 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 <code>replace</code> blocks with <code>if</code>-statements. Let's look at those <code>if</code>-statements first:

<pre style="color:darkblue; white-space: pre-wrap">
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)
}
}
</pre>

You may use an <code>else</code> 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 <code>replace</code> 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:

<pre style="color:darkblue; white-space: pre-wrap">
if (climate == CLIMATE_TEMPERATE) {
//replace block for temperate to go here
}
if (climate == CLIMATE_ARCTIC) {
//replace block for temperate to go here
}
</pre>

And this is actually all there is to it, if you just want 8 bit sprites. We'll leave adding a <code>grf</code> block and the language file over to you. It's no different than for the [[NMLTutorial/Road vehicle|road vehicle]].

== 32 bit graphics ==

To define our 32 bit sprites, we have to define an <code>alternative_sprites</code> 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 <code>ZOOM_LEVEL_NORMAL</code> and that the sprites are 32 bit via <code>BIT_DEPTH_32BPP</code>.

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 <code>alternative_sprites</code> block. Let's look at the first line of that block:

<pre style="color:darkblue; white-space: pre-wrap">
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") {
</pre>

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 <code>alternative_sprites</code> block for the first set of sprites:
<pre style="color:darkblue; white-space: pre-wrap">
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]
}
</pre>

It is good practice to place the <code>alternative_sprites</code> block right after the <code>spriteset</code> block it belongs to. Let's do that and at the same time fill in the other <code>alternative_sprites</code> block.

<pre style="color:darkblue; white-space: pre-wrap">
//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]
}
</pre>

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 [[NMLTutorial/Road_vehicle_graphics_template|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 <code>tmpl_truck</code> 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:
<pre style="color:darkblue; white-space: pre-wrap">
//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)
}
</pre>

For our <code>alternative_sprites</code> blocks we can do the same, there's really nothing to it:
<pre style="color:darkblue; white-space: pre-wrap">
//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)
}
</pre>

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 <code>alternative_sprites</code> 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 <code>alternative_sprites</code> for these sprites will be similar, but you specify the different zoom level (in this case) via <code>ZOOM_LEVEL_IN_4X</code> and reference the template you have made for sprites of this zoom level. For the first set of sprites you then get this additional <code>alternative_sprites</code> block:
<pre style="color:darkblue; white-space: pre-wrap">
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)
}
</pre>

And the total set of blocks:
<pre style="color:darkblue; white-space: pre-wrap">
//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)
}
</pre>

And with that we conclude this example and in fact the whole series! Feel free to read the conclusion. Or not.

{{NMLTutorialNavbar|Base graphics replacement|Conclusion}}

NMLTutorial/32 bit base graphics - Revision history

FooBar: complete page

FooBar: intermediate save