Tuesday, January 31, 2012

The Art Of The Fairy, Environment

Harry The Fairy is an 2d adventure, action, puzzle game for iPhone, iPad and Android.

To render the 2d graphics and help us make sprite atlases in unity3d, we used Sprite Manager 2 from http://www.anbsoft.com/.

This is a short run-through of how we did the environment graphics for the game.

The game is set in the caves under a forrest. Here our hero has to save his friends from the evil machines.
The idea was that the hero shouldn't feel at home in the caves, he is clearly out of his element.
The caves are meant to be frightening without being too scary.

We wanted the game to look hand-drawn more than 3d or realistic, so all the concepts and art pieces are painted in photoshop.

This early concept shows a dark and gloomy cave. Not many colors and a bit cold.

This captures the feeling we wanted pretty good and became the most importent concept drawing.
But before we could design the final pieces we had to decide on the shapes of the the walls.

We had to find some shapes that could shape the caves organically and overlap without it being to obvious, where they overlapped each other.

It looked great, but it was to dark and colorless.
We wanted to emphasize the difference between nature and the evil machines a bit more.
So the environment needed more color and the machines should stay almost colorless.
The machines used only one “warning” color, yellow.

We made the walls look more like earth/dirt, but still with some gray stones. We also made objects, such as roots, grass and mushrooms to use for decoration.

The focus was to make an organic environment, that looked natural and not made of boxes.
Each of our two walls had their own mesh collider, to make the interaction with the environment natural.

The deeper you go underground the more dangerous the environment gets. Here lava-walls were created from the same shape as the dirt-walls making it possible for us to use the same mesh colliders.

The machines were made of small parts put together to create wheels, levers, doors and hatches.

As a way to close off the cave from the parallax background, we used a dark piece of stonewall. This way we could make some areas seem like narrow tunnels and others like big open caves.

All these elements was build into two sprite atlases.

Finally we added a dark shadow mesh around the level to close off the cave.

I hope you found this useful, feel free to email me with questions.



  1. awesome work! Thanks for sharing :-). I have a question regarding the shadow mesh; it looks like a ssloid mesh so it seems like the edges would be sharp.. How did you make the edges soft?

  2. Hi David

    If you look at the edge of the mesh, towards the level elements. There is a line of polygons all the the way around the level, they are mapped with a "shadow" map. It's basically an alpha map that goes from white to black.
    This way we can make the transition from level elements to the dark shadow mesh really smooth.

    Hope this clears it up, if not I can make a small tutorial for you showing how it's done.


    1. That makes sense, thanks! I would love a tutorial if you don't mind though. I think I get the principle, but I'm not sure how to go about it :-)

    2. Hi David
      I'll see if can get some time to do a small video for you.