NMLTutorial/Road vehicle 32 bit sprites - Revision history

FooBar: point to base graphics replacement as next page

2012-06-26T20:47:32Z

point to base graphics replacement as next page

← Older revision		Revision as of 20:47, 26 June 2012
Line 197:		Line 197:
	</pre>		</pre>

	And with that we end this example of adding 32 bit sprites to your road vehicle NewGRF. Of course, the same method as used here also applies to providing 32 bit alternatives for any other <code>spriteset</code> you may have. ~~Only~~ ~~thing~~ ~~left~~ ~~for you~~ to ~~skip~~ is ~~a useless~~ ~~conclusion~~ :)		And with that we end this example of adding 32 bit sprites to your road vehicle NewGRF. Of course, the same method as used here also applies to providing 32 bit alternatives for any other <code>spriteset</code> you may have. Now you can continue to learn how to replace base graphics.


	{{NMLTutorialNavbar\|32 bit sprites\|~~Conclusion~~}}		{{NMLTutorialNavbar\|32 bit sprites\|Base graphics replacement}}

Supercheese: /* Spritesets */ Add missing slash in tag

2012-06-26T18:19:57Z

Spritesets: Add missing slash in </code> tag

← Older revision		Revision as of 18:19, 26 June 2012
Line 75:		Line 75:


	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.		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">		<pre style="color:darkblue; white-space: pre-wrap">
Line 127:		Line 127:

	And that's really all there is to defining 32 bit sprites!		And that's really all there is to defining 32 bit sprites!


	== Templates ==		== Templates ==

FooBar: finish page

2012-06-26T11:19:56Z

finish page

← Older revision		Revision as of 11:19, 26 June 2012
Line 165:		Line 165:

	== Other zoom levels ==		== Other zoom levels ==
	For each additional zoom level, you simply add additional <code>alternative_sprites</code> blocks.		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 end this example of adding 32 bit sprites to your road vehicle NewGRF. Of course, the same method as used here also applies to providing 32 bit alternatives for any other <code>spriteset</code> you may have. Only thing left for you to skip is a useless conclusion :)

FooBar: intermediate save

2012-06-26T11:08:38Z

intermediate save

Show changes

FooBar: intermediate save

2012-06-26T10:51:07Z

intermediate save

New page

{{NMLTutorial}}

Now that you've seen that you can add 32 bit sprites, let's do that with an example. In fact we're going to pick up halfway down the road vehicle example from the beginning of this tutorial. We'll continue with what we had at the end of [[NMLTutorial/Road vehicle graphics|this page]].

== Example graphics ==
We'll be adding 32 bit graphics for the normal zoom level, including a recolour mask. From there we'll give you some pointers on how to add sprites for other zoom levels and you can easily fill in the rest yourself. So let's look at the graphics, shall we?

First, let's have a look again at the 8 bit sprites we already have for our road vehicle.
[[Image:Flatbed truck 1 goods.png|frame|none|Empty flatbed truck sprites and flatbed trucks sprites loaded with a container]]

The 32 bit sprites are similar to the 8 bit sprites. The main difference is that to indicate transparancy you must use the real transparency of PNG files. If you use the blue background for transparency in 32 bit sprites, you'll get just that: a blue background. You may also use the alpha channel for semi-transparent pixels.
[[Image:Flatbed truck 1 goods 32.png|frame|none|Empty flatbed truck sprites and flatbed trucks sprites loaded with a container in 32 bit.]]
Note that the sprite background is actually transparent. We've made the borders around the sprites blue, so that we can actually see where the indivual sprites are. This is not mandatory; as it doesn't end up in the game, you could have made it any other colour, even transparent if you like. We'll put this file in the ''gfx'' folder with the regular 8 bit sprites and name it ''Flatbed_truck_1_goods_32.png‎''.

Now even if you use the exact colours from the palette, this won't enable company colours in 32 bit sprites. For this you have to provide an additional 8 bit mask sprite, which does use the exact palette colours. Ingame, this mask is overlayed on top of the regular 32 bit sprites, which will give you a company-coloured vehicle. Note that we've only drawn the company colours!
[[Image:Flatbed_truck_1_goods_mask.png|frame|none|The mask file to go with the previous 32 bit graphics]]
As we're now drawing in 8 bit again, we also have to use the magic blue to incidate transparent backgrounds! Also this file goes in the ''gfx'' directory and we'll name it ''Flatbed_truck_1_goods_mask.png''.

== Spritesets ==
For the regular 8 bit sprites we have two spritesets in our NML code. Let's have a look at those again:

<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]
}

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]
}
</pre>

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></code> and that the sprites are 32 bit via <code></code>.

{{NMLTutorialNavbar|32 bit sprites|Conclusion}}