Create your own background image

Knowledgebase / Create your own background image

To create your own images, you need some understanding of how to use image editing software such as Paint, Photoshop or Pixlr.

In Gamefroot, the default game background is an empty colored area (white by default). But you can use a background image to make your game more interesting. A background image is the image that appears behind everything in your game, and a good background can create an atmosphere that evokes certain feelings.

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.

Background images can be as large as you want, but they should ideally fit the game’s resolution (the default resolution is 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 drawn the characters and the rest of the game world? 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 to be. If your background is too overpowering could that distract your player from more important parts of the game?

Also, remember the scale of the characters and the other parts of your game world. If there are buildings or some other kind of background object 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 upload it to a pack.

Play 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.

Don’t forget to script the background!

This page explains how to make your background follow the camera.

Happy game making!