Monday, March 11, 2013

Tile Maker Tool

To deal with one of the graphics needs from the previous post, I built a tool that creates tiles from masks.  Masking is a process that lets you grab only a portion of the image, as you will see below, and particularly, I'm using it to help create smoother, more randomizes lines between tiles.  If you look at the previous post, the tiles have razor sharp lines between them, making it painfully obvious that there are square tiles at work.  This tool will help fix that

The images below are not what I intend to use for the game, I just grabbed some temporary images to prove the tool out with (hint hint graphic designers, 64x64 tileable, need dirt, grass, concrete, sand, pavement, possibly a few others but not many. :).

Then I used The following mask images.  (The white shows where the mask is, the rest is translucent.) 

For anyone who isn't aware of how masking in games work, here is an example of how it works when I combine NE with 2.  Starting with a black image, the mask only let the part of the image through that overlapped with the white of the mask.

But even with this one, I was running into a problem.  If you compare the original grass image (2.png) with the masked tile above, it appears very bright.  I wasn't sure why.  To try to debug, I attempted adding a second masked portion.  (3 and NW)

This one looked a lot closer, but there are still pixels that are too bright.  When I combined them things really got messed up.

So I spent a while making sure my equations where right.  with some help from GameDev.Net, I was able to first fix the initial coloring issue, as someone pointed out I had put a '*' where I needed a "+".    Next result:

Now the initial grass and concrete match up better.  But I still ended up with an over-bright section where they mesh together.  The problem was that my first try at this was using a binary equation that actually had no hope of working.  (it works great if there is no alpha blending required)

Original = Original |OR| (New &AND& Mask)
But GameDev.Net came through again, with a better equation, though a bit longer.  (thanks eppo)

Original = ((Original * (255 - Mask)) + (New * Mask)) / 255
After applying this, I was able to get the files fully working, and here is a subset of what the tool created.

The numbers relate to the tile type, and the position relates to the mask.  The order is NE-NW-SE-SW.  0 is dirt, 1 is grass, 2 is concrete, 3 is pavement and 4 is sand.  

From these 5 images, at 64x64 pixels each, with all permutations, came out to 625 images, for a total of 6.5 megs.

To begin with, the download will just include these in the beta, but I'm thinking that I'll have the client request which tiles it needs based on the map it receives.  Either that, or that this tile producing process will execute on the client side later on, which took approximately 3.5 seconds on a 3.3 GHz thread.  But that included save time, which won't be needed on the game client, unless I can cache the images.

No comments:

Post a Comment