On making a short game

Last week I released Busy Boroughs: a greek breeze, a short hidden object game that I created out of a greek mythology themed illustration I made.

It was a very informative process - there's definitely things I will tweak on the next one based on what I've learned so far, especially regarding the game development and coding.

But I'm pretty happy with the result! I feel that having the wimmelbilder scene animated, being able to move around and interact with it, makes for a much more immersive experience, which is one of the strengths of this kind of image!

So here are some takeways from this project:

Planning the image

Search and find images are a bit complex by themselves, but thinking of it as game adds an extra layer of complexity.

• From the start I had to divide the scene in smaller sections with subthemes and distribute important characters and events throughout the image so there wasn't just one area of interest.

• Layer management was so important here. Not only naming everything to make it all easier to find when sending the images to Unity, but defining what would be static, what would be animated frame-by-frame, what would be animated directly in Unity, and how it all would affect the order of the layers. It's very easy to get lost with so many different elements, so organization was key to make it work.

• Finding the balance to get a busy image, but not an overcrowded one. I wanted to make sure you could understand the setting and feel immersed in the city, its buildings and paths, but also have it be a lively place, with different people and activities. To get to the result I wanted, I had to work a lot with color and texture to make the scene feel busy while maintaining its readability.

Animating

As mentioned on the previous item, this was an extra step from a regular wimmelbilder illustration and involved layer management and the actual animations.

• For this search and find scene, I had important characters that I wanted to highlights - the greek gods and mythical creatures. I chose where each would be located while sketching, and drew the final versions in separate layers. After the image was done, I went ahead and made small frame-by-frame sequences for each of them - in the game, the animations start playing when you find the god or creature that's listed as hidden, so as you play the game the scene becomes more lively.

• I also had non-interactable elements that would be animated. A few of them were also animated frame-by-frame, like the water effects.

• Most non-interactable elements could be animated directly in Unity, with movement and rotation, or with sinusoid movement for the boats - which required a specific script. All these elements were also drawn in separate layers. And I had to also consider the pivot point for each inside Unity.

Development

Although it's a simple game, there are several small decisions to make regarding the game code and presentation.

• I divided the game in 3 steps or stages, each one showing a larger portion of the illustration.

• There's a small tip for each hidden item giving some context on where to find it.

• Small hidden objects disappear when found, but finding gods and mythical creatures makes them start an animation.

• The UI was drawn with greek-like elements to have it all be a part of the same theme.

Hope this helped give an overview of how the process went!

Some thoughts on perspective

Search and find illustrations are usually seen from a certain distance, so that you can fit a lot of different events, characters and objects in a single scene. That doesn't mean, however, that there's only one way to define how the scene will be viewed, and the perspective used.

One artist, different ways of approaching perspective: Mattias Adolfsson. Source: mattiasadolfsson.com

If you look up different artists, you'll find different approaches. Scenes that show smaller environments and use two point perspective. Scenes that show the section of a house/tree/submarine/whatever place you can imagine, and use one point perspective. Scenes that use a top down view, similar to what you find in retro rpg games, where you can see things from above but still highlight important elements such as the front of the buildings. Scenes that don't use much perspective, but organize the image with different planes, like a theater play. And scenes that use isometric or dimetric views, which are the ones I use the most.

Why do I like to use isometric/dimetric projections? I'd say two main reasons.

One is that I come from an architecture background (I worked quite a few years before deciding to go full time as an illustrator), and we learn to use isometric perspective from early on as a way to precisely describe buildings and construction elements, since there's no distortion. I think the concept works for the kind of image I enjoy creating because it's a way to make the whole scene start out with the same level of importance, encouraging the viewer to wander around the entire piece.

And the other reason is that I want my work to have a sort of feeling that is reminiscent of miniatures, games, toys, to get to that enchantment and exploring sensitivities we have as kids. And while trying out different views and proportions of the elements of the drawing, I noticed isometric works like a charm for that, as it really can make you believe the illustration could be a miniature set of some sort.

Some isometric and dimetric approaches I've used to best convey the feeling of each illustration

I always start with a grid, but over time I've become less attached to it in order to position things in different angles and make the image more dynamic and lived-in. Most of the time I still respect the projection's rules for that, but now I'm more comfortable breaking a few rules when it makes the image more interesting and immersive to the viewer. That way the perspective we choose becomes a strong ally in achieving our vision for each illustration.

Using TEXTURE to create engaging worlds

I want to make a few posts about important aspects that can make or break seek and find illustrations. And I'll start with texture.

Texture is present everywhere in real life. It can be subtle in some surfaces, like screens, or very present in others, like wood panels. Texture affects the way light is diffused and is basically what makes us recognize different materials.

When talking about art, of course you can have images that aim to have a very clean look and feel, with flat colors and smooth lines. Still, some of those lines can be used to describe some texture differences, like in curly or straight hair, or maybe clothing materials.

In wimmelbilder, though, we usually want an immersive experience, and a big part of that is making the world we are creating feel very lived-in. And texture can help a lot here. Have a look at the examples below:

Different roof tiles, scratches and dust, grass and concrete floors, wood and stone walls, can all be described with just a few lines to indicate texture.

Of course shapes and colors are an important part of it, but the imperfections that a good use of texture can highlight make the world more believable than if we draw a place with only clean and spotless surfaces and objects. It's like we are able to feel the scene, and not just watch it from afar.

Just a reminder, though: too much texture can take you away from the scene if it messes with its readability or distracts you from what's actually going on in the world you're drawing. As many drawing books will tell you, it's important to choose where you are applying texture and how much of it, so that it reinforces what you are trying to show instead of getting in the way.