Creating A Seamless Tileset For A 2D Side Scrolling Game

 

WSC-SOON

Stick to the grid, it will make your work much more efficient.

tileset_image01

Building out levels does not have to be tedious. You can save yourself a lot of time and effort if you begin a project correctly. Do your level designer and yourself a favor and take the time to craft a custom tile set that snaps to your grid. In this post, I’ll show you how to do just that.

style_guide

It’s always good to start with a style guide. Disregarding the technical aspects, its only concern is making sure that the final tile set adheres to the game’s art style and color palette.

Once we have our style guide down, we can start to work creating each of the tiles.

tiled_grasses

Each set of two, top to bottom has a slightly different slope. This means that when we go to build levels, it is very easy to get lots of variation in game play without having to custom build a ton of assets. While building out the tiles, we have to make sure that each one adheres to the 32×32 grid we are using in game:

16-pixels

16 pixels are half of a grid unit, using this knowledge to our advantage, we can ensure that each edge has a segment that matches every other tile.

the_grid

Using the tools available to create art that speeds up the design process is an integral part of game design. The grid is definitely one of these tools. Making sure that your assets use the grid will save you both time and money when planning out and executing a project.

I’m pretty happy with how the levels in Wingsuit Cute came out! Have a look:

Advertisements

One response to “Creating A Seamless Tileset For A 2D Side Scrolling Game

  1. Great post, super helpful to see your systematic approach and how it can create something so organic!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s