Dassault Dev Diary 1 - Using layers to compose images

Dassault is a game I started for the Game Jolt Demake Contest and it is based on the excellent game Droid Assault from Puppy Games. The contest is already finished but I will keep working on the game with the purpose of learning some techniques (some of them based on the original game) and to share my experience in doing so.

In the original game, the droids are rendered with two different colors if they are from player's team or not, this is an example:

player droid enemy droid

For Dassault I wanted the colors to be based on each team's color but when having a lot of teams I don't want to have one sprite sheet for each one and I don't want to limit the teams quantity beforehand.

One solution is to have a base sprite sheet and then color it with some script, to generate a lot of sprite sheets. One problem is that it requires a lot of files and that I have to regenerate all of them if something has changed in the base sprite sheet. Also, the number of teams cannot be changed during the game.

Another solution, based on this post from Puppy Games Blog, is to render the droids in several layers, each one with its own color. With this approach, I can paint some layers with one color and the others with default color to make them look just the way I wanted. Here is an example:

droid shadow+droid legs+droid background+droid eyes blur+droid eyes=droid result

Now coloring some layers:

droid shadow+droid legs colored+droid background colored+droid eyes blur colored+droid eyes=droid final colored

That was the solution used and it worked right. Inside the game we render the layers in order, to produce the correct result.

To design the images in several layers we are using Gimp. I try different color palettes to see how they'll look inside the game. Then I save the layers in gray scale exporting each one in a different image file using Export Layers as PNGs python plug-in for Gimp. The images are ready to be colored inside the game.

Here are some screenshots showing how it looks inside the game:

dassault screenshot 01 dassault screenshot 02

dassault screenshot 03 dassault screenshot 04

And here you have a video:

You can try the game here. That's all for now, next time I am planning to talk about animations.

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)

Tags: , , , ,