Autotiles - HTML5 Game Development Insights - page 89

Here's an explanation of how to make such sprites in the simplest way. This method yields a decent result if you
have no professional artists on your team. Additionally, these bundles are stored in an easy way for browsing and
editing.
First, make sure you have turned on a grid that fits the tile size. In Photoshop, it's in the Edit ➤ Preferences ➤
Guides ➤ Grid&Slices menu. Set the Gridline Every parameter of the tile size (32 in your case) and the Subdivisions
parameter to 2. Close the window, and turn on the grid (View ➤ Show ➤ Grid).
Now you must choose a ligament, which is a kind of tile that links other tiles among themselves. In your case,
it's gravel. Make the canvas 3*4 tiles, and fill it with a linking basis. Next, select the surface that you want to smooth.
Make two upper tiles on separate layers, and four bottom links in one layer. Now you need to cut the useless
elements from the grass layer including the large empty space in the center of the bottom four tiles and the edging in
the upper-right tile. Then cut the second tile in the third row. It has to be filled with gravel. Erase a narrow line around
central square (expand it a bit). After that, erase a narrow frame around the upper-right tile. Your result should look
like Figure 6-4 .
Figure 6-4. Surface step 1
Now let's see how the future image is constructed. You construct the resulting sprite from quarters. As an example,
let's take the upper-left quarter. Depending on the neighbors of that corner, it can take up five positions of the texture.
In Figure 6-5 , neighbors are schematically shown; a dot corresponds to your tile, V are tiles that are equal to yours, X are
different tiles, and a ? can be any tile.
Figure 6-5. Neighbors of a corner. V means equals your tile, X means different than your tile, and a dot is your tile