Alba: a Wildlife Adventure released on 11 December 2020 after almost 3 years of development. The game centres around Alba who visits her grandparents on Pinar del Mar for the summer. She gets swept up into starting a wildlife rescue league with her friend Ines after they rescue a dolphin — not knowing their small actions would soon have a big positive impact.

If you’d like to see more, here’s our trailer. You can find the game itself on Apple Arcade, Steam, Playstation, Nintendo Switch & Xbox.

For every download of the game, we also plant a tree — aiding towards reforestation in places like Madagascar, Mozambique and Nicaragua. Check out our growing Alba forest here at Ecologi.

We plant a tree for every download of our game

Now that the game has launched on multiple platforms I wanted to share a bit of insight into how we created the environment art for the game.

Specifically, I’ll be going through:

• The Inspiration for Alba — What inspired us to create this game and how we brought our vision together.

• The Environment Art Style — How we decided on the style for the environments.

• Platform considerations — How we managed to make an open-world game on a mobile device.

• Terrain and Tools — What tools we used to get the most iteration within a small team.

The work presented here is far from mine alone. Alba was a big team effort! I created lots of environment art for Alba but had a lot of help from my colleagues. In particular, I’d like to shoutout to David Fernández Huerta who was the Art Director on Alba and shared the artistic vision for the game with me; and Ian Zell, who, apart from having made characters, animations and cutscenes, also worked on environment art creation which was a great collaborative effort.

The Valencian “barraca” farmhouse can be found in the farmlands area of the game

The Inspiration for Alba

From the very beginning, the project was inspired by Mediterranean childhoods and a love for birdwatching and photography.

The game went through a few iteration stages before it eventually settled on the idea of a chillectathon where you go around and explore at your own pace. The core progression of the game would be through signature collection as you’re trying to complete a petition. You would go around the island helping people and with that gather their support for a much bigger goal. The theme of conservation of wildlife and the environment came in as a big thread to tie the story together.

From there we drew up our game pillars which helped us stay aligned throughout the creation of the game:

• Care for Nature

• Sense of Spain

• Freedom of Childhood

• Human Impact on the Natural World

  
  

Game Pillars

Reference

To make sure the game represented a true sense of Spain I spent a lot of time travelling around Google maps together with our Creative Director David. He would bring me around areas like Valencia, Náquera, Serra and El Palmar.

Google Maps was heavily used throughout preproduction

Throughout preproduction, I shared my inspirations which would then bring on more ideas from the team. Even though we all had our own version of childhood memories, quite a bit of overlap was there too!

Bouncing back and forth and aligning was both a necessary process but also what made the game exciting to work on for the whole team.

Some areas are heavily inspired by real-world locations. These images below are buildings from the real world that made it into the game in some form or another.

Birdwatching

We also went on a field trip with the team to Rye Meads in Hertfordshire to really capture what it’s like to go birdwatching!

The Environment Art Style

When I first joined the team the environment art present was build using simple geometric shapes and solid colours. This process allowed for building things quickly and easily straight inside the engine. The same process was used to create our characters.

Although this was not the final look we wanted it was quite charming. It brought an almost childlike view to the game as if you saw the world through Alba’s eyes. We loved it so much the characters continued this simple look right through to final release.

From this point, David and I worked together to build the environment art style that would suit the art direction of the game.

Left: Demo build 2019 before environment art was put in place. Right: An early version of Alba’s character made up of lots of primitive shapes

Colour and mood

The final colour palette was heavily inspired by real-life pictures taken on location as well as Joaquín Sorolla’s work — a Spanish painter from 1863–1923. Not only did his work inspire the colour palette, but it’s also the subject matter and mood that you typically find in his work that we wanted to portray in Alba. We paid close attention to the compositions of our locations so players could also enjoy snapping pictures of the environment around them as well as hunting for the next wildlife photo.

The main artistic inspiration for the environments of the game is Spanish painter Joaquín Sorolla 1863–1923

Level of Detail

To keep with the simple shapes and solid colours that we loved it was natural to bring this onto the environment assets as well. Once we started making bigger assets though it became clear that we needed a way to get more definition into the shadowed areas. We then went for a gradient colour palette upon which we stretched the UV’s

Left: First buildings were made with solid colours. Right: the same building with and without gradients

Manipulating the UV’s over a gradient gave us control over details in the shadow.

Decals

Solid colours and gradients worked really well for most items but when we went bigger yet again it felt like we could use some actual textures to indicate what the material was of these surfaces. Big surfaces being town floors, concrete piers, breezeblock walls, etc.

We shied away from tileable textures as they would be harder to implement with our gradient texture workflow. This also meant that we could put these texture decals into our texture maps together with our gradients.

We didn’t need our decals to be transparent as we tried to avoid transparency for optimisation reasons. When we had to lightbake for performance reasons we had to separate our decals from our meshes to avoid them casting shadows. So unfortunately not all of it got optimised to 1 drawcall in the end.

Chipping

Our assets are proudly low poly. Again — a deliberate choice to keep the game running smoothly and keep to clean and simple shapes like the characters. Although in some parts we wanted to break up the sharp edges to sell the story that this is a realistic world. There are crumbly bits of concrete, and corners of chipped bricks. By using a boolean technique on our assets really helped sell what they were made of. It was also a great way to add detail to assets that didn’t have the space for decals.

Boolean technique used to chip our assets and reduce straight lines.

Clumping

Apart from gradients, decals and chipping, which all happen at the mesh level, we also clumped together meshes to break up the visual straight lines you would otherwise see in the world.

Placing decorative meshes around long stretches of straight lines helped break up the silhouette.

No normal maps were used in Alba to reduce on texture size so instead, we opted to manipulate the vertices we had through means of a normal transfer. Normal transfer is a tool in which you transfer the normal directions of a smooth temporary mesh over to an intersecting mesh to give the illusion that our shapes are all soft and continuous, aiding our shape language.

Left: without normal transfer Right: with normal transfer

Platform Considerations

Camera FOV

Alba was created with big considerations for the mobile platform. Here at ustwo games, we pride ourselves on iterating the game design so that it feels intuitive to play naturally with one hand.

In order for the game to fit well with this criteria, we opted for a portrait mode camera where you navigate Alba with just your thumb and the camera would follow from behind.

The drawback from this was that we required a really large FOV so the player could still see more of what’s left and right of them without having the camera too far back and where you can’t see our lovely protagonist.

Some of our assets, especially buildings, were therefore squished in their proportions from the first floor upwards so they still looked proportionally right next to characters but would not stretch the perspective too much when stood in front of a big building.

Left: realistic proportions — Right: squishing the first floor

Squishing the first floors of buildings helped with the extreme FOV angle on mobile.

Optimisation

The fact that we were creating an open world mobile game meant that we would be pushing the limits of what a device such as this could handle.

From the start, it was clear the environment art needed to use a limited amount of texture space. As mentioned in the art style section before we deliberately used gradients and decals to get the most out of our solid colour style for our environment assets.

Above: We used a primitive set that was pre-unwrapped on gradients to quickly make assets. Below: These same assets got quickly recoloured by use of our gradient colour atlases.

LODs

Using gradients meant that we were heavily relying on our mesh vertices. After a while, this also became quite an overhead and we had to consider heavily LOD-ing our items. This did not come without its own cost, however.

More meshes for LODs also meant more space taken on the device so we had to carefully consider which meshes needed them, how many levels were needed and which ones we could get away with culling altogether.

We ended up using a tool called InstaLOD for this. In our case, we used the add-on that works with Maya to quickly run our meshes through a pretty refined algorithm. This saved us a ton of time that we then used to polish and clean up the game some more.

Reducing on texture space made our in-game mesh data heavier so we needed to LOD specific meshes.

Our pine trees are one of the most prevalent assets in the game. It’s also quite tall so should be visible from a distance — therefore it got 4 LODs.

This blue tall rise building in the game was visible from lots of angles. It was prioritised to get more LOD levels than most other assets.

Terrain and Tools

The biggest custom tool we used to make Alba was likely our terrain editor. From the beginning, we knew we wanted to paint on our terrain and sculpt on it but we also wanted to move these parts around in order for spaces to get closer together or further apart whilst design was iterating on locations, compositions and distances.

So for art not to lose all their work each time and design being heavily reliant on art to make the space recognisable again we opted for a procedural approach.

Luckily the overall size of the island we went with was not too big and from an art perspective, we could get away with only using 4 materials on the terrain so we managed to make our tool run on only 1 terrain mesh.

The biggest custom tool we used to make Alba was likely our terrain editor.

Terrain Height manipulations

Under the hood the terrain tool uses 3 height manipulation modes:

• Ridge — for creating hills, cliffs, beaches and terraces

• Valley — for rivers, water outlets and ponds

• Level — for flat areas and smoother slope transitions

Each of these could be edited with a curve and variables such as noise. The height manipulations then get put into a heightmap which then feeds into the terrain.

Terrain Ridge feature

Height manipulation achieved with ridges — red markers all represent a “pull point”

The heightmap also feeds into our terrain shader — telling the terrain what splat to use where.

We had 4 splats, each with its own colour channel (RGBA):

• R — Dirt — the bread and butter to break up all other splats.

• G — Clay — Orange clay cliffs in this case. Representing this particular area of Spain. Was also used in a variation on our paths.

• B — Grass — no nature without grass~

• A — Sand — no island can go without it!

Terrain splats split into RGBA by predefined height rules

For each splat, we had a ruleset. Sand would only appear on certain low heights of the terrain. Dirt would come in as the next layer in the height as well as appear on really flat and even surfaces. Then it would transition into Grass, almost all areas of the game are grass unless the incline was so drastic it would then turn into cliff splat material.

Height data informed where to put our splats. All 4 splats are visible here.

After this pass was done we added some more detail maps to each splat. This means the gradient transitions between splats would now have a bit more detail.

We only had 4 terrain splats for the entire game so we needed to make them count.

These maps really helped with stretching the bandwidth of our limited amount of terrain splats.

The grey areas in these maps would determine how quickly the detail would come through between the gradients of the splat map.

Terrain Stamps

For a long while, our procedural splatting approach towards the terrain was just what we needed. Until we came to a point where we wanted to manipulate the splats more carefully.
In areas where things were really flat, the terrain generation would produce dirt splats but what if we wanted a long stretch of flat grass?

Our solution to wanting more splat freedom was terrain stamps. These would consist of the same RGBA values that were already assigned to a splat. The stamp itself could use any mask shape we wanted although we generally stuck to a limited set. These would then be projected onto the terrain after all the heigh calculations were complete.

Terrain stamps allowed for more flexibility and control for the art team

Terrain stamping was useful not just to give more definition to flat areas but also to put dirt where otherwise there’d be grass. Due to the grass tech we have which is always spawning grass meshes where there is a grass terrain splat, it wasn’t always ideal when this grass would be sticking through shallow meshes like pesticide puddles, stairs or driveways. Stamping dirt there was our solution.

Custom Terrain Stamps on the farm area

Terrain Biomes

Not only did we use procedural heightmap data to render our terrain, we also procedurally generated a big portion of our biomes.

Alba features many animals, all condensed on a small island. We wanted the player to feel like they are in distinctly different areas which would also explain the change of fauna found.

Biomes around the game were mainly made through procedural means

Again this change was known to become highly iterative so to make the load easier on the art team a tool was written to randomly scatter biome assets around.

We defined each biome with biome elements. Ex: a pine tree forest biome would include pine trees, pine cones and bush biome elements. The biome elements all have variant slots as well as variables indicating how likely each asset would spawn and what the scale ranges would be.

A forest biome with its biome elements

These biomes would then be placed onto the terrain in a similar fashion to the terrain manipulation. The marker would project cubes onto the terrain to indicate the area where it would generate a biome. The colour of these cubes would represent:

• Yellow — area where biome generation happens.

• Green — an asset will be generated here.

• Red — an asset could spawn here but won’t because of restrictions

These colours were very useful for us to understand what to expect before generating the terrain. A requirement we came up with was to be able to move around the biome markers and keep the compositions inside intact. For example, a clump of trees that was spawned in just the right composition would spawn in the same composition even if we moved this biome to the other side of the island.

Biomes would generally overlap, so how do we make them work together? In order to overlap or put a biome inside another biome we worked out a system of prioritisation. The marker’s vertical position would therefore decide what would be overwritten.

Generating a forest biome

Marker height changes prioritisation of biome generated

How it all came together

All of these terrain tools were very useful to get a good base together on which we could decorate. When the polish stage came around we decided to remove some of the procedural areas to then hand place assets again for a better level of control.

Terrain generation and hand placed assets

Here you can see how all of this work came together to form some of the beautiful locations you can find in Alba. Hopefully, this breakdown was useful for anyone out there wanting a bit of insight into techniques we used to achieve an open-world game on mobile. If there is anything you’re particularly curious about please reach out or let us know in the comments.

Thanks for reading!