The Making of Unreal Nano

Json (Joohansson)
Nano
Published in
7 min readOct 30, 2020

--

Welcome a behind the scenes tour of unreal.nanos.cc. Starting using Unreal Engine 4 from scratch can be daunting at first, but once you learn the basics, it’s an excellent tool for bringing ideas to life! There wasn’t anything I couldn’t pick up quickly from the extensive collection of helpful video tutorials available on Youtube.

The Landscape

I set out to create a beautiful and relaxing setting inspired by Nordic mountains, lakes and forests. The first step was to define the landscape.

I used World Machine Basic, a free application for creating heightmaps that can later be imported to UE4. The resolution is not the best in the free version (513x513) but sufficient for the job. With lots of tweaking and tuning of parameters, I ended up with this flowchart.

With a layout generator defined with some polygons and shapes, I was able to create a mountain ridge where the sun would set in the west, and leaving space for a lake to be carved out later in the middle.

It rendered out like this:

A broader second landscape was then generated to cover some far distance mountains, outside the first one.

Exported as a heightmap, tweaked in an image editor and imported to UE4.

Landscape heightmap
Landscape in UE4 with material applied
Large render with the small landscape in the centre

Before adding water material, I applied the landscape material using the brushify.io kit with forest pack.

Foliage, Trees and Water

Now to bring the scene to life with the introduction of natural elements.

I applied a custom grass layer using brushify and several grass assets from various places, including the city park kit and optimized grass lib.

The water was custom-made, based on a combination of the brushify water and city park water. I also applied a planar reflection layer on top of it to get that high-quality reflection you see in the cinematic trailer. The underwater volume was constructed by a physics volume, so the character knows when to swim, and separate post-processing volume for visuals.

The rest of the foliage and trees also came from the city park kit and placed using mostly procedural functions. I utilized the UE proceduralFoliageVolumes for natural distribution, with a handful of custom placements added by myself.

One of the procedural volumes
Example of one procedural tree and lifespan

A lot of effort went into the remaining light setup and main post-processing volume. The light setup is basically a skySphere, a directional light (sun), skylight, skyAtmosphere and exponentialHeightFog. Resulting in this landscape.

Final light setup

Objects, Places and Fire

With the scene set, I introduced some elements of civilization to complete the map.

I used the barn and hut from the city pack and the countryside pack and also created a fireplace, with custom fire, based on this fire package and some other meshes.

The fire FX
The spooky barn

The jetty is also a modification of one of the assets from the city park pack, and the boat was given a wiggle-function to make it sit more realistically in the water.

Boat wiggle function based on randomized X and Y sinus curves

Game Logics

All the menus were created from scratch, and quite a lot of logic went into controlling those and perhaps leaving some room for future optimization.

Options menu
Option menu logic

The character logic had to be modified a bit as well with custom sword light, camera switch, position save/load, and other improvements.

Character logic

The Nano tree is another custom feature with 18 lights fully programmable with websocket listener from the Nano plugin. The lights will animate when a new transaction is sent to a specific account, and a QR is displayed to the user when they come near the wooden sign.

Tree logic sequencer

Where each light intensity is controlled over time like this.

Tree light intensity time function

QR generator and websocket listener from the main blueprint.

The Nano transaction visualizer is a custom function I got help from Nano plugin designer and developer Wesley Shillingford to create. It spawns spheres with different sizes based on the transaction amount. It assigns different materials to them based on the transaction type, and all transactions are taken from the live Nano network.

Nano Transaction Visualizer at 200 transactions per second

The local fog clouds that can be found in the level are based on a particle system which spawns volumetric type material instances.

Local fog cloud
Cloud with volumetric light replicated from the fire

The 175 sound actors were placed out with care to give a natural audio feeling.

Sound sources

VR, Multiplayer and Cinematics

VR support was added to the scene as well. Importing the default VR set that comes with UE and created a switch class to be able to activate the MotionControllerPawn from the options menu. It worked pretty much out of the box. Just had to place the navigation mesh volumes to calculate the allowed nav path.

Calculated nav mesh

Also made a little VR game to show the possibilities.

VR tower game with real physics simulation

Multiplayer support was added with some additional logic to handle character names and server communication and the game server was compiled to run in Linux.

Example: Rotate the name label above the character to always face the players

The final step was to make the cinematic trailer, which involved programming various camera paths and render out the result in 4k resolution. I then combined all clips and synced audio from the scene.

Final sequence
One of the camera rigs (not included in the final movie)

The most advanced shot was probably the character animation where the player location had to match both the feet animation speed and position of the beach, with a camera to run along with it. Turned out fine I think!

Character animation
Running character final result

Time to play!

Unreal Nano will remain completely free of charge and is available on Windows and Linux.

Donation

Found this helpful? Consider a small Nano donation or sponsor me on Github😉

nano_1gur37mt5cawjg5844bmpg8upo4hbgnbbuwcerdobqoeny4ewoqshowfakfo

--

--