Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Designing tiling game art for a 2d scrolling game
5155
single,single-post,postid-5155,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
THINKLABS_Blog_Image_tiled

Designing tiling game art for a 2d scrolling game

So, your going to make a 2D side scrolling game? Well you’re gonna need to make an epic seamless scrolling background to go with it!

Tile BG

As a designer you may think that its going to be too much work to make it tile while you design. Believing that it may hamper your ability to quickly concept and get your ideas down. Well you’d be dead wrong! With just a little touch of organization and forethought you can still design your game graphics quickly and eliminate the need to go back and clean it all up at a later date. Here’s some concepts to help you out.

 

Keep you PSDs clean and organized

The more organized your PSD is the better off you’ll be in the end. Grouping like elements together and arranging them logically will allow you to quickly find and edit your level design. It also makes it easier for the developer, or who ever builds the level, to go through and export the needed layers. And don’t forget to name your layers in a way that makes obvious sense to anyone that might jump into your file.

 

tile layers A

 

Use smart objects as much as possible

When you use smart objects correctly you give yourself the freedom to change your design on the fly, and retain the ability to SCALE those elements up and down as many times as you want till it’s just right. The only thing you need to keep in mind is to scale the graphic down to a good starting size. It should be larger then you’d ever need it so you have freedom, but not so large that it will bog your PSD down while you work.

 

tile smart objects

 

Working in powers of 2 is always a safe bet

What does that mean? Well for us designers it means creating graphics,textures and assets that conform to a hight and width that is a power of 2, like  (2 ,4,8,16, 32,64,128,256,512,1024,2048,4096). In the following example you can see that the level file is 4096px wide and 1024px tall, the intention is to cut this into 4 sections and then randomize the order to create more variety in the tiling background.

 

tile size b

 

Now, this doesn’t mean that every element you import into your PSD needs to conform to this. Really the only thing you need to worry about are the final exported bits. And to be clear the power of 2 rule isn’t mandatory for all game projects, in flash for example its not really an issue at all. But in say Unity or a even in HTML 5, to a lesser degree, it does become important. And if you ever get into 3D it becomes very important.

 

Planning out the target size, and make it work for you

So, as I mentioned before I built this level expecting to chop it up into 4 squares that are each 1024x1024px, which will let the developer arrange them in a random order to keep the level fresh. I had a rough idea/sketch to get the items placed as well a a reference for the scale of the main character in the game, in this case a truck as the game is a racer for little kids. The other know factor was that I intended for the level to pan vertically somewhat as the player moved across the lanes.

 

Here the white box indicates the viewable play area for the game.

 

Screen Shot 2014-08-27 at 10.01.47 PM

 

Since I knew I wanted variety in the background tiles I decided it would be easier to design them together. And as I had the basic sketch and placment of the lanes and the size of the vehicle set in relation to the game screen it was easy to  set up a game plan to have the 4 sections designed together to be seamless.

 

Its important to note that I actually added more to the top and bottom edges then I needed, just in case we needed to scale or modify the elements later. Like if the client wanted to shrink the art down or scale it up. Since I left extra art and used smart objects that were scaled down I have that option for flexibility.

 

With the plan set, use guides and snapping to keep things clean.

 

 

tile guides

 

With The guides set I could control how the sections game together. I used shapes to define the curve of the grass and sand areas. Notice how there is a point at each intersection that defines the shape and is the same at all intersections. Each vertical guid is also 1024px apart. I also made sure that none of the plants or rocks crossed the intersections so it wouldn’t cause tiling issues later.

 

tile guides B

 

The textures that define the grass, sand and the road are themselves a tiling 1024px wide texture masked by the grass and sand shapes which covers the road tiles. The seams of the tiles are set at each 1024px intersection.

 

tile grass

 

Whenever possible create your elements in a non-destructive manor

This is important as it gives you a lot of flexibility to tweak your design quickly with out committing to anything. For example, since I used a vector mask that was tileable on another tilable texture I end up with a very versatile compound tiling texture that goes a long way in hiding its tiled nature. So, use a combination of smart objects, masks, layer effects and  layers adjustments keep you from committing or altering the original art to much. And if you do need to edit the actual layer contents, just make a back up copy of that layer just in case.

 

 

And thats it. Have fun with your tiled game backgrounds.