Pimp my Game – Create your own game background

Note: this tutorial has been updated here http://gamefroot.com/knowledgebase/create-your-own-background-image/

 

With Gamefroot we make it easy for the entry level game designer to effortlessly create a game using the default assets, but for the next level of game designer* we offer a lot more customization. You can design your own characters, terrain, in-game items, and backgrounds. You can then upload these assets into Gamefroot to build games that are uniquely your own. In this series of tutorials I’m going to show you how to do all of that to create a masterpiece you can be proud of.

*To take advantage of Gamefroot’s customization it is important that you have image editing software and a working knowledge of how to use it.

Gamefroot Backgrounds

In Gamefroot the background is the image that appears behind everything in your game. A good background can create a lot of atmosphere in a game. For example: a game about zombies with a moonlit graveyard for a background will seem dramatic and scary, but the same game with a bright blue sky for a background wouldn’t have the same impact.

 

 

Game backgrounds remain static in games. Background images must be 768 pixels wide by 512 pixels high.

 

Designing your background

Consider the visual style of your game. How do you want the rest of your game to look – in what style have you done the terrain, the items, and the characters? Think about the atmosphere or mood of the level. You can evoke different moods with the colors you use. Think about how detailed you want your background. If your background is too overpowering could that be distracting and ruin the game?

Remember the scale of the characters and the terrain. If there are buildings or some other kind of background terrain in your background, make sure they are appropriately sized so that they seem in the distance if they are supposed to be far away. Also remember that as objects are further into the distance they appear duller and have less contrast.

I thought about all of these things when I was creating an Arabian themed background for the Gamefroot default backgrounds. The visual style we were going for was a kind of detailed pixel art look. It had to suit the characters and terrain that we had already made.

I sketched out a layout of some sand dunes and trees with domed buildings, but testing it out in a game revealed some problems with scale (the trees were way too big).

So I rearranged everything to create a layout that worked a lot better.

Then I went over the whole composition and cleaned it all up. In this background image, as the trees, buildings and mountains reach further into the distance they become more and more faded. To ensure the style of the terrain and the background worked together, I replicated the tree tiles and put them away in the distance. The golden brown colors in the terrain tiles have also been carried through.

Here’s the background in a game. Using a background with tiles and characters that fit the style can make your game feel professional and polished.

 

Be sure to pay a decent amount of attention to making your backgrounds – it definitely pays off.

Uploading and testing your Background

Once you have finished making your background, save it as a PNG, JPG or GIF file. Then load up your level on Gamefroot and open the Level Properties. Click “Choose file” to select an image from your computer.

Once you have selected your background image it will show up as a thumbnail in the level properties. Click “Done” to go back to your level.

Then preview your game to see what your new background image looks like in game. If you are unhappy with it, go back into your image editor and tweak until it looks right.

Multiple levels, multiple backgrounds

If you want a game with multiple levels then you can really show off your artistic ability and create a customized background for each level. This can make your game feel much more varied and immersive. For an example of this, play the Isaac Newton game.