A Lowpoly love letter

Making a game all by yourself is a journey of testing, failing, making compromises and finding efficient ways to express your ideas. While my previous game had 90’s looking pixel art, I knew I wanted to go 3D with Embracelet from the start. But 3D is a lot of work.

I did 3D modelling and animation in college, but that was 20 years ago. You know what they say about riding a bike – once you learn, you never forget that skill. 3D is nothing like bicycling. It’s more like if bikes have been replaced by flying hoverboards that you control with your nostrils. Luckily the tools are somewhat easier to use nowadays, and there were tons of tutorials and helpful forums that could get me up to speed.

And as a fan of cartoons and graphic design, I knew I wanted to create a game with a lowpoly aesthetic.

The prototype

The summer of 2018 I was sitting hunched over an underpowered laptop, trying to learn Blender and how to import 3D models into Unity. Keeping models lowpoly (with few details) made it easier to iterate and change things, while keeping a clean style that is easy to read. Win win!

After many iterations and tests, I was able to model and rig a passable character and import it into Unity for more testing and learning.

The characters

Embracelet has a lot of characters – more than 40 different models. They are all modelled by hand, polygon by polygon. Again, keeping things clean and simple was my rule of thumb. The characters should be easy to read and easy for me to animate.

Characters are modelled with an automatic Mirror modifier in Blender. This makes it easy to create symmetrical characters and edit the body parts faster.

The characters are modelled the old school way of extruding and moving polygons, carefully moving and connecting vertices. This makes it easy to have more detail where body parts need to bend, and to keep the visual style clean.

The scenery

I wanted the visual style of Embracelet to feel light and airy, stylized and colourful. Like all characters and assets, the scenes you’ll explore in the game are modelled in Blender. I did not want to buy ready-made assets, as I would have found it hard to keep the overall style coherent. Some games suffer from a visual disconnect when some parts of the game looks lifelike and amazing, while other parts of the game are simple and stylized. Embracelet is far from perfect from an art direction standpoint, but at least I feel the parts that make up the game fit together.

I knew I would not have the resources to add textures to the world of Embracelet. Instead I chose an almost flat colour style, where each polygon is visible and the colour is baked into each vertex of the 3D model. I painted the colors using the Vertex Paint mode in Blender, which was super fast compared to UV-mapping everything.

The scenery reacts to light and shadow, which I found more interesting than a completely flat style. It also has Screen Space Ambient Occlusion, which is a fancy term for making cracks and corners darker.

The shaders

Shaders are small computer programs that runs inside the game that decides how the models are rendered. I used Amplify Shader to create most of the shaders in Embracelet. Technical jargon warning!

The scenery gets its color from the vertex data, baked into the .fbx models. In addition, to create some life and randomness to the flat graphics, there is a big, transparent sphere with a waving, handpainted water colour texture overlaid the whole scene.

The characters are actually UV-mapped instead of vertex shaded. They share an incredibly small texture:

The folks (and animals) of Embracelet are supposed to stand out from the background. I decided to remove shadows from their shader so they pop and read better. Also, flat-styled characters are cool! They also have a very small fresnel rim light to make them ever-so-slightly more three dimensional. When limiting the character to these colours, the art style became more coherent.

I also made a custom shadow node for the character shader, so that it’s possible to control their general brightness from a script.

The animation

Rigging, animating and controlling all the characters was one of the biggest workloads when making Embracelet.

Characters are rigged with skeletons inside Blender, and each bone is connected to the different body parts with blend weights.

The characters have a library of movements, all keyframed the old fashioned way (no motion capture). All the animations are imported into a character controller in Unity, a spiderweb of all the animations that can smoothly change into each other.

During the first year of production, I used the Blender files directly inside Unity. This worked great at first, and made it really fast to change and iterate animations and scenes. But as the game and characters grew more complex, it took longer and longer to import updates – sometimes many minutes just to change a single keyframe. I realised I had to convert each and every object in the project to FBX and reimport them. It was a nerve-wrecking two week nightmare to make sure every object, character and animation were exported properly and worked inside the game. Lesson learned!

To animate talking, expressions, blinking and wind I used blend shapes – basically different keyframes of the 3D model to smoothly move between.

To simulate wind, I made custom scripts that animated the wind blend shapes by a wind strength value while also affecting the vertex offset on certain shaders – like grass and trees.

Sky and Sea

The first prototype I did with 3D graphics had 3D shapes as clouds, but I could not get them to look as fresh and inviting as I wanted. I needed the sky to look fluffy and warm, so I ended up painting it instead.

I painted the sky in Clip Studio Paint as a equirectangular map. Inside Unity it’s converted to a Sky Cube. It took quite a few iterations to hide and adjust the pinching of the corners.

The sea uses one of the only art asset I bought – I tried making my own water shader but it was too much work to get it looking right. I found the Stylized Water asset, and that was just what I was looking for. Sweet reflections, waves and foam and a clean look, and performance was good too.

Speech bubbles

There is no voice acting in Embracelet, and instead the characters talk in speech bubbles. I spent a lot of time working on getting this as good as I could. A pet peeve of mine is slowly animating text… Don’t tell me how fast or slow I can read! In Embracelet speech is presented instantly in bubbles over the characters head (most of the time!), and you can spend as much or as little time reading as you like.

The font size is big, white on black to make it easy to read. No squinting required!

I implemented the very fun (and slightly beta) Text Animator asset to add some liveliness to the text, and a custom PG swearword generator using custom sprites.

The font I used is actually my own handwriting, created in the open source Font Forge program.

Conclusion

When you work on a project for so long, it’s easy to only see the issues, the cracks, that weird limping animation, the grass that clips through those rocks. But then I remember that even the biggest budget games also sometimes look weird or have immersion-breaking bugs. The lowpoly style of Embracelet is probably not for everyone, but I hope it serves its purpose – to help you imagine being somewhere else and to let your imagination fill in the missing gaps.

Embracelet is coming to Steam and Nintendo Switch this September. If you like, you can wishlist the game or follow me on Twitter.