How to cut a rendered model in two sprites

[maquinista]

This is a tutorial to cut the models in two or more sprites to code it as PNG images. My English is not very good, and I have GIMP in Spanish, and I don't know how set it in English.



Some sprites have their own ground sprite (1429 or 1447), other sprites have a standard concrete ground (1420). Some examples are the hotel (1450 and 1453), the fountain 1455. The parks have a grass ground tile (1456 and 1457). Most of tropical sprites doesn't have ground sprite and can be cut. Some buildings (the church) have a default sprite (bare land) in some of their construction stages.
If the sprite doesn't have their own ground sprite, it must be rendered without ground. This is very important.

These steeps could be done with Your favorite image editor, It must support layers.

First, You need make four copies of the original layer, and set off the visibility of "reference" and "building".

Second, the layer "aux" must be rotated 180º and must be moved to the bottom, because the shape of the opposite side of the base will cut the "base" layer.

[maquinista]

The next steep is get a layer mask. Click with the right mouse button on the layer name of "aux" an click in "Layer to Image Size".

Then, click in "add layer mask", and select "transfer layer's alpha channel". Click in the layer "base" with the right mouse button and click in "add layer mask", but this time select "white".

Select the layer mask of the layer "aux" (only click in the thumbnail) and copy it (ctrl + C). Click in the thumbnail of the layer mask "base", and paste the layer (ctrl + V) and then "Anchor layer". Turn off the visibility of the layer "aux", because It wont be used. The ground sprite is almost completed. But... the street lights was chopped (It will be recovered latter).

Turn on the visibility of the layer "building", and draw a Path with the path tool. This path must define the outline of the building in the base. In transparent areas, this pat mustn't touch the building.

[maquinista]

Next step: click in "select -> From Path" in the image's window and turn off the visibility of the layer "building". Select the layer (not the mask) "base" and click in "Lock Alpha channel" option.

Select a gray color (I always use this: RGB 555151 ), and fill the selected area with this color. You can use the "Bucket Fill" tool, or drag and drop the color from the toolbox.

Then, click in "select->invert" in the menu. Select the pencil tool, click in the layer mask of the layer "base", select a white color (RGB FFFFFF) and paint around the edges of the base layer (not around the selected area) also, paint in the street lights to recover them. See the second screenshot that aren't show in the post.

[maquinista]

The next step is the "building" layer. Don't remove the selected area and select the layer "building" and turn its visibility on.

This will be done with the quickmask. Turn it on with SHIFT + Q, and the not selected area will take a red color.

Click in "colors->levels" and set the first text box in 254 (see screenshot) and the borders of the selection will have 100% selected. Press SHIFT + Q again and press delete (edit->clear, or delete in keyboard).

Click in "select -> none".

[maquinista]

The building is almost completed, but It will look a bit buried between the grass tiles. It must be raised two pixels, but.. Is needed a base to avoid transparent pixels in the game. This pixels gets random colors and looks ugly.

Take this image from wiki:
http://wiki.openttd.org/wiki/index.php/ ... 420_z0.png

Save it in the hard disk and drag and drop the file in to the building. It will be a new layer. Put this layer in the bottom of the layer stack. And move the layer at the center and at the bottom of the image, 2/3 pixels under the ground sprite. Sometimes this layer will be out of the canvas. Click in "image->Fit Canvas to Layers".

The building is finished. Save a copy in XCF.BZ2 format before take the PNG sprites.

The number of sprite of the ground is 1544. Set off the visibility of the layers "building", "aux" and "reference", and save a copy as "1544_z0.png". Set off the visibility of all the layers and turn on "building" only and save other copy as "1545_z0.png". You will be asked because PNG file format doesn't accept layers, select "merge layers" option. Don't save the PNG files with a layer mask selected (You would get the layer mask), select first the layer "building", or other layer.

Don't save too much metadata in the PNG file and don't save transparent pixels.

The next step is with PNGcodec, and It has been explained much better than I can do.

[habell]

Thanks for this very clear tutor

[maquinista]

How to set the offsets easily:

I use PNGcodec with batch files. This files are very useful, because You won't need use the console.

A batch file has the extension .BAT or .CMD, and has intructions line by line.

Code: Select all

pngcodec.exe
pngcodec r 1495_z0.png x_offs=-125 y_offs=-53
pngcodec r 1496_z0.png x_offs=-125 y_offs=-53
pngcodec r 1568_z0.png x_offs=-125 y_offs=-106
pngcodec r 1569_z0.png x_offs=-125 y_offs=-106
pngcodec r 1424_z0.png x_offs=-125 y_offs=-233
pngcodec r 1425_z0.png x_offs=-125 y_offs=-233
pngcodec r 1534_z0.png x_offs=-125 y_offs=-292
pngcodec r 1535_z0.png x_offs=-125 y_offs=-292
pause

The final line "pause" allows to read the result of the "pngcoding" process. Without the "pause", the console window will shut down very quickly.

To cheek if the sprites are well positioned I run the game, and I find the sprite in the screen or I try to build it. Then, I bulldoze the surrounding tiles. I appears pixels with random colors or is a bit lower than the other tiles, the sprite is not well positioned. With a screenshot (Print Screen key) and a image viewer (I use Irfanview, with paste) with a very large zoom, It is easy to count the pixels that the sprite must be moved.