Yuan Works Development Blog - Video game development, tutorials, design, and news

Working with tiles!

Happy New Year, everyone! Today I’ll work with on a looping tileset.

The screen in a traditional 2D video game is generally divided into smaller pieces called tiles. These tiles are often 16×16 pixels, although other sizes also exist. Here’s an example:

Familiar, isn’t it? Many Famicom/NES games looked like that. In this image the tiles are pretty obvious, but there are several tricks to make them less apparent. One of them is creating fluid loops where it is hard to tell where the tiles join. Consider the following rock tileset I made for the game:

When I join them together it is very difficult to tell that they are tiles, and not a continuous drawing:

See? This makes the individual tiles much harder for the eye to spot. It also gives a natural feel to the game, instead of a blocky checkered look. You can even make a nice cycle with just one tile. Practice and a little experimentation is all you need.

Something that also helps camouflage the tile-look is giving a little depth to the tiles. For instance, I can draw the top of the rock to make it look like it isn’t absolutely flat:

Of course, these tiles are for cosmetic purposes only. Ryuuhi cannot walk on top of them. They only serve give the illusion of depth. This way we respect the engine but cheat a little bit visually.

As a result, we get a flexible, natural looking tileset that matches the style of the game without compromising the elemental engine and saving memory. It is also a good idea to take on or two tiles and make some kind of landmark, or special feature that will not only make a certain part of the map unique, it will also help a player recognize where they are. But more on that later!

5 Responses to “Working with tiles!”

  1. G-G Says:

    Looks great!!! Please, please, please release this on Dreamcast :) :)

  2. Fusion_Power Says:

    Wow, I really love your “Making-Of”-Blog entries. :) Much to learn, its like Discovery Channel for Pixel-Fans. I exactly tried this “invisible tile” stuff a while ago. Because my Pixel Skills are poor I used the lazy way: modeling something in 3D and make a 2D pic of it. :D Saves time and you can pixelate and resize it later with a graphic programm (reducing colours, dithering methods…) of course this is far away from beautiful Pixel-Art ^^”"”
    http://s5b.directupload.net/file/d/1680/r34bl7dc_png.htm

  3. raon Says:

    Great post!!!

  4. Charlie Says:

    I really enjoy following the progress of this game here. It’s already looking great, keep up the good work!

  5. Yuan-Hao Says:

    Thanks everyone. We’ll keep you updated so don’t forget to subscribe!

    @Fusion_Power: Thanks! Discovery Channel for pixel-fans, sounds fun :D anyway, it looks good in CG though, it could be kept that way

Leave a Reply