Art Spotlight: Modular Environment Hexes

Back to overview

About

Hello! I am Gwendalyn, a 3D artist and game design student from Nanyang Polytechnic, Singapore. I started learning how to create 3D assets in school about one and a half years ago and have been doing so ever since.

Recently, I was given the opportunity to travel to Finland for an exchange/internship programme. When I was there, I joined a student team, Team Grappling Hook, to help develop the game Toy Thieves. The modular environment hexes featured in this article were some of the assets that I helped them create for the game.

Art Style

The game’s art style is similar to the works of MinionsArt, as shown below.

Some art inspiration was also drawn from Animal Crossing and The Legend of Zelda: Wind Waker.

While working on the game, Toy Thieves, I had to learn Blender and get used to creating assets based on Team Grappling Hook’s art bible.

Key features of the art style for Toy Thieves:

  • Low-poly meshes: To compensate for the large amount of game objects in a scene.
  • Saturated and pastel colour palette: To reflect the child-like mood and cutesy aesthetic of children’s toys.
  • Gradient texturing: Used to mimic light and shadow in place of ambient occlusions without using properly unwrapped UVs. It also looks rather simple and minimalistic.
  • Shaders: To create more variation and vibrance in the terrain and the game environment. These included a modified toon shader, a tiled texture shader, and a few others.
    (I am unable to show the tiled texture and toon shaders here due to them still being in development. They also do not belong to me, so I have settled for showcasing the mostly raw model, without any shaders.)

References and Inspiration

The game was intended to look simple and playful, yet cartoonish at the same time.This helps to reflect the aesthetic of children’s toys and other enjoyments. We used Pinterest to collect and share our references and moodboards. Here are some pins that were related to the environment hexes.

Concepts

Some of the concepts were designed and mocked-up by the lead artist and lead designer of the team, respectively. These include the construction site, dinosaur, labyrinth, birthday, racetrack and castle hexes. I was allowed some degree of creative freedom, and after a few iterations, some of the final hex layout and design were changed to accommodate the player.

Most of the hexes were created as I modelled them since I did not have enough time to go through with all stages of creative development with each hex. I strongly do NOT recommend creating your models without at least testing them with some concept art.

Tools

  • Blender 2.8 for modelling
  • Photoshop for texturing
  • Maya to assemble the scene for Sketchfab
  • Unity for initial game scene assembly and level design

Modeling

Following the art style that was already decided for Toy Thieves, I had to make the hexes look simple and low-poly. It was also important that I optimised them and made them game ready.

As I was modelling, I had to make sure that I was keeping enough edges to apply the gradient texture effectively. Sometimes, I had to add extra geometry to help create base patterns or shading.

I created the props modularly according to each hex’s theme. This was so that the game designer, or anyone in the team, could rearrange and edit each hex’s layout individually, should there be a need to. To further lower the polycount, I also made custom mesh colliders, which I did not need to use in the Sketchfab model.

UV Unwrapping and Texturing

This is what the final UVs look like. It’s a mess. There is only one 256×256 colour texture that is shared amongst all the hexes.

I did not use specific colours for specific material types, but I followed a general guideline:

  • Yellow and brown for dirt and sand (rough or earthy props)
  • Green for plants and grass
  • Light blue for glass and metals
  • Dark blue for water
  • Other brighter (or unnatural) colours to make some parts of the hexes stand out

This method of texturing allowed me to adjust the value contrast on the verticals of the UV, and the hue on the horizontals.

While there may not be any real UV unwrapping in this method, knowing how to adjust the UVs so that they may have some form of ambient occlusion does require an understanding of light and shadows.

Planar map the object from the side. I used the side orthographic view, then projected the UVs from camera.

Adjust the position of some of the UVs. The vertices or edges with the higher geometry, where light would hit first, go higher up on the gradient column; the lower geometry, where light would hit later, goes lower on the gradient column.

Changing the colours. Now if I move the same UV shell into different gradient columns, it allows for the colour to be changed while keeping the same value contrast. For example, if I move the existing UV shell into the green column, it can be used as a hex with a grass base.

After this gradient “unwrap”, I would make another set of UVs so that the tiled texture shader could be implemented on the model in-game.

Sketchfab

Scene Presentation

Since I had initially set-up the individual hexes for modular generation in the Unity game engine, I had to re-set-up the scene for Sketchfab.

I started by importing all the individual props into Maya and making sure all of them shared a single mesh and UV set. (There was one exception to this where I had used one of the plant model textures from another texture set. I had to create a separate material for that.)

This is a top view of each of the hexes after being set up with their props.

I then built the scene as it might have appeared in the game.

Sketchfab Set-up

I exported the final scene from Maya, into a .fbx file to put it into Sketchfab.

For the 3D settings, I used the PBR renderer and lit shading despite having only used flat colours, since these settings rendered the colours more vibrant and accurate to the original. I also used the Specular material workflow since I only had an albedo map.

The lighting I used is the standard Glazed Patio by Restaurant environment. In the shadow settings, I increased the light intensity and decreased the shadow bias to create a sharper shadow for a more toonish feel.

For the final touch, I used SSAO for ambient occlusion and more contrast, sharpness to focus on the many small props in the scene, and vignette to focus the scene in its entirety.

Here are all the settings that I used:

Check out the final result:

Thank you for reading, and to Sketchfab for the opportunity to write this article.

You can find me and more of my work on my ArtStation, Twitter, and Instagram.

You can also check out Toy Thieves on Twitter and Facebook to keep updated during its development. Toy Thieves will be released on Steam in Q1 2020.

 

About the author

Gwendalyn Toh

3D Artist, Game Designer and Student


Leave a Reply

Your email address will not be published. Required fields are marked *

  • Avatar Chris says:

    We use this technique in our mobile games all the time and it’s awesome way to optimize assets and make easy changes to colors. These hexes are beautifull, great job!

Related articles