Blog

Article

Posted april,14th - 2015

The backgrounds of Canvaleon

What must a tiny studio without too many resources do to make their game more attractive visually?

Well, if the game is going to have a 2D-based visuals, the answer is easy: design backgrounds and tilesets with inventiveness and needless of fancy stuff. These backgrounds should provide a nice touch on the look of the levels.

I'd like to explain the process to make these graphics, but today I'm only going to focus in one of them: the backgrounds

Canvaleon is a game in which the colors are a main theme, and I always have tried to play along this idea.

Far from limiting the coloring to the mere conventions (blue sky, brown ground, and the like), I have always tried to create "atmospheres" having the main color of the world as a base, although I couldn't do it in every world.

I have also avoided falling in some clichés from popular culture when designing some environments. But before planning these details, first we have to know which is the "main theme" for each world and which "sub-themes" will appear in each one of the levels of those worlds.

Idea and concepts:

All that becomes clear with the conception of the project itself. Once the ideas for the project are developed they are compiled in a document which will serve us as some kind of "word of god" (the Game Design Document or GDD) to know what can and cannot be done.

We assign tasks and deadlines and when we begin production we resort to the GDD to see descriptions of what is going to appear in a level, for example. In this point, I transform the written idea from the GDD to a visual concept, I make some sketches and the ones that work better according to the consensus of the team will be the ones that will be used to develop the final graphic.

Foto 1The backgrounds of Canvaleon
[Concept for Canvas's village and a background element from the tutorial.]

The implementation:

When I make the environments I must always follow certain auto-imposed rules. Undoubtedly, this is the most boring part, but on the other hand, it is really satisfying to see the result finished and well integrated.

The levels in our game have a little effect called "parallax scrolling" to create the illusion of depth. To do this, we need to take into account certain dimensions that apply to graphics, and furthermore, they must be placed in the correct coordinates within each layer.

Sometimes this is more a work of trial and error, but I always take as a reference that the furthest layer will have dimensions similar to the game screen size; doing so, the movement of the background respect to the movement of the camera will be very slow, mimicking a perspective and a depth. Then, the next layer (closer to the real level) should be around the half of the total width of the level, so this layer will move faster than the first one and slower than the speed of the level scroll, and thus we see this effect of "puppet theatre" that people like.

Foto 2The backgrounds of Canvaleon
[Example of the layers used to create the effect of parallax scrolling.]

And we don't forget about the background animations! putting animations is basically the same as inserting elements in each layer of the parallax. The difference is that I must define the number of frames and their speed. This is a resource we don't have overused to not saturate the player with excessive movement, but that was needed to represent some situations (which I won't spoil in this blog)

Technique and style

The main idea since I began working in this project was to imitate pictoric techniques, playing with the idea that our chameleon was a literal blank canvas that must be filled correctly to avoid the sight of enemies.

Some times this "painting" look is not as present as other times which it is very evident. At this point I don't know if I have followed a certain pattern but I'd say that as the more natural an environment is, the more pictoric will be its look.

All graphics are made using digital tools (not the same for the concepts), so I have used digital brushes that imitate, with more or less fidelity, real painting brushes and the result is, at least, good-looking.

Joan Redondo.