Using UE4 Shaders to Port Games from Flash

Nathanaël Lesage talked about Fishing Cactus‘ latest title Shift Quantum started as a 2D flash game and turned into an indie cyberpunk project in 3D style.

Introduction

Hello, my name is Nathanaël Lesage. I’m a 3D artist and animator at Fishing Cactus development studio, 7 years of service. Lately, I had the pleasure to be both Art Director and Lead Artist on our latest title Shift Quantum.

Today, I’d like to give you an overview of the graphical process that helped sublime the original flat 2D flash game into our take on the cyberpunk 3D style.

Each level from the original games was made of simple 2D black and white blocks. The player solved each level shifting from one color to the other, inverting the world to create negative space.

The Basic Blocks

The unicolored basic blocks are still used in the new iteration of Shift to create the bases of the game’s levels. However, in a 2D view, the paths were easily understandable, whereas transferring these to a 3D perspective meant harder level readability. Volumes and edges were barely visible.

With the World Aligned Blend node in the shader, I was able to apply two colors on the block to highlight the zones allowing for the character to move and induce at a better demarcation of the edges for ledge grabs.

Here’s the shader:

Another gameplay block that really needed a makeover was the non-shiftable block used in both the black and white world. As its name suggests, this block prevents you from using the Shifting mechanic while the character is on top of it. The visual aspect of its first iteration didn’t fit the new art direction for the project and so we decided to change its design to be just one color that would be readable in both worlds. Now that we made it more visible, it was in need of a little bit more style. It needed to look dynamic and quickly recognizable for the player at a glance.

To add dynamism, I worked with an animated shader that had a “glitchy” look to it. Using all of these elements in world space to avoid tilling, the grey color would now be represented in the game as borders. To finalize and harmonize the whole aspect of the non-shiftable block, I added an array of meshes that gather together randomly in its center.

The Background

Let’s take a look at Shift Quantum’s dynamic background: the graphical layer of our game.

Our first decision regarding the background was to not have any lighting; we only wanted to play with volumes and shaders based on camera distance to vary colors, details, and rim lights.

Because the player having to always be in the center of the screen, I wanted to lighten the space around him to improve the visibility and darken the border to create an oppressive contrast. To do this Michael Delva, our game programmer gave me a hand creating this basic material function.

Once our visual style was chosen, the game needed a design for the city and an appropriate camera position. I proceeded by creating different blockouts, then after their integration into Unreal Engine, I played with the camera to find the best spot for our city.

Our city has a lot of geometry, buildings and props exist in 3 LOD each. The first one is only in geometry for the closest districts, the second one varies between geometry and Alpha, and the last one, being a billboard, would only be used for far away districts.

This process meant loading took a while between levels because each object had its own blueprint. For that reason, I had to merge all our props and buildings to obtain a minimum amount of draw calls.

Shift Quantum’s city is composed of 8 different districts with 4 variants for each of them. Linked by the Axon Vertigo tower having pride of place in the center of the town, it gave us a variety of random points of view for each level of the game.

The Story Levels

In some specific levels, you’ll encounter a little girl who guides you through the story. Her presence will cause interferences to the game world and these interferences will appear as glitches over the city. They are basically post-process materials.

The Character

The player controls a character that was iterated upon many times before looking like our neo-esque avatar. At the very beginning of the project, I created a high resolution sculpt without the character’s distinctive trench coat.

The character was meant to be small and all the details linked to the normal map were detrimental to the comprehension of its general volume, so, I chose to remove a lot of details which finally gave it much more presence. However, the small size of the character became a real problem when it came to animations. I decided, then, to add a trench coat which significantly improved the movements’ comprehension. That trench coat also gave a bolder silhouette making the character and animations more dynamic.

The animations were very basic in the previous versions of the game, we added an edge grab for fluidity and increased jump height and distance. A lot of feedback animations were also implemented to give more context to the player’s actions, which helped to better set the character in his environment.

To have a good control over the idle transitions, we needed to create two different sets of animations: one when the player is oriented to the right and another when he’s oriented to the left. We also needed several animations for the “climb up” at different heights and monitor speed in order to keep the gameplay smooth.

The entire game is in full 3D but we kept the 2D spirit of the old license when it comes to the story; creating it in 2D frames animated in Spine.

The Interfaces

So, the game development was going smooth but we still had no interfaces. We needed them to be simple and clear enough to be used throughout all parts of the game.

To make them more lively, I wanted to create an animated background but had no idea of how to easily create a “plexus effect”. I watched loads of tutorials and they all suggested to do it programmatically using particles or shaders. That was way too complex for me but I finally managed to make one simple and clear effect for the whole interface. Of course, it’s less dynamic than a real one but it does the trick.

My plexus effect is made of 3 layers that pan with a rotation and an animated mask to randomize it a little bit.

As for the rest, an animation of the WidgetSwitcher was enough to give it more life.

Conclusion

I’ll finish this article by thanking all the artists, game designers and developers who worked with me on Shift Quantum and helped me bring it to the next level. I’ve learned so much as the person responsible for the art direction of the project and would like to also thank Fishing Cactus for giving me that opportunity.

Thank you for reading!

Nathanaël Lesage, 3D Artist & Animator at Fishing Cactus