Art process – Part 1

It’s time to look at the process and journey we have taken to develop the art so far for Goblins of Elderstone. Please note that we are not even in Alpha yet and everything is still very much WORK IN PROGRESS – we have a long way to go still 😉

It all started almost a year ago with a concept render I did in Blender and we are now finally getting to a much more polished looked in engine in Unreal. I think I’m going to break this up into 4 parts, focusing first on the general look and the environment art, then next time we will go through the buildings evolution. After that we’ll talk about the process for the goblins and creatures and finally we’ll show the path we took with the UI.

Part 1 – Environment and general look

First off let me show some images that were inspirations and references for what I wanted to make and what we wanted to emulate artistically. The first thing I did was build several boards on pinterest with all my favourite images from games and concept art that I thought would be great reference for our game. I <3 pinterest. This proved to be invaluable later when we entered production as it was easy for me to share the boards with other team members to discuss concepts or ideas. I then also created a massive “art direction” board in Google Drawings with all the Key images from my own concepts, renders and references from images found on pinterest and google images. This was really useful as you can scale the board up to a ridiculous size and past all your images in full res and move them around as you need.

Looking at some of these a little closer and trying to name the references as best I can:

PigArt

This is from a tutorial by PigArt, I found on Youtube for Low Poly modeling and has been the foundation of all our vegetation and rocks etc.

There is a lot of great low poly art out there but in terms of colour there are 2 images I always keep coming back to and it’s these 2 (I don’t know who they belong to):

This was found on pinterest and comes from a polycount competition I think, I love the rock colour and the greens.

The colours of these for day and night are great. I believe this belongs to https://www.reddit.com/user/ManiacComet ? but was found on pinterest as well.

the mood of this at night is also so good

credit https://www.behance.net/timmychau

And at some point I discovered this increadible art from https://milanvasek.artstation.com/

I would later use his beautiful birch trees as a reference for my own.

Some of the games that have been an inspiration to the art style as well as the gameplay are obvious, but for this post I only want to focus on the art, environment art specifically, will discuss gameplay and design another day:

Dofus/Wakfu – colours and cuteness, I’ve always loved the art and especially the colours in Dofus.

Godus – simple design and colours, a lot of their concept/marketing art was really great (let’s not talk about the execution of the game…)

Armello – disney feeling of fantasy and fable – what a beautiful game.

Of course there are many other games, movies and images that influenced me during the process and many games have been announced or released with a low poly art style now, but the above is a good concentration of what hit the right marks with me and are still references we go to.

So! – let me walk you through what we have done so far.

Original Concept Render and Target

This was the very first render I did with some basic trees, rocks, a building built from a reference online (I’ll get into those in the building part of this post) and my gobo. The world at this stage was 3 boxes.

Night time with lights

After some more experiments with lights and a few new assets. I knew I wanted to make the art with vertex painted assets and only doing textures where finer detail was required. I love the idea that the game should make you think of a toy world

When we went into pre-production and added our amazing talented artist @MomoSchli we developed the target render further with some of our first building assets, lots of lights and several concept ideas for the environment. (this was also our first reveal of the logo and name for the game)

More assets and details for the website background.

With an art direction established we got to work on getting the game looking like our concept renders.

This was the first set of assets I made (from the original concepts) placed in Unreal with default lighting and materials.

I knew we had a lot of work to do :/

at night with a small horde of goblins. Early days…

The Level

Production started and our 3D artist joined the team. He took on the production of the buildings and goblins and I focused on getting the world and environment looking right. After lots of improvements to the materials, lights and a post processing volume along with new assets for cliffs and trees I remade the test made we had been using:

All the cliff pieces ready to be used to make the map (eventually we hope to procedurally generate the world with pieces like these)

Building the level

tada!

TADAAA!!!

I was really happy with these results but we were nowhere near the fantastic magical look of our concepts or references. So more work to be done…

New trees and a night and day post processing volume:

more trees and different tests with water

argh… I thought this looked good at the time… looking at it now I just shake my head.

Starting fixing the colours

So there was a major problem we had with our colours. We just couldn’t get the in game colours to look the same as the colours in blender. We discovered that there is an issue with vertex painted assets when imported to Unreal. At first we repainted the assets in blender to be darker and more saturated, but obviously this wasn’t going to be viable solution, so we dug around a bit and finally found a solution.

sRGB colour fix

more info on a similar problem with the same solution here

Colour Grading

The next step, and the one that makes the biggest visual difference by far, is colour grading using a Look Up Table (LUT) reference in the post processing volume.

This is a screenshot I took of the game, with some reference cubes of white, yellow, red and blue (should have made one in black I think as well) to use for my colour grading process in photoshop. I used some tutorials for this on youtube and the documentation on Unreal is great.

Here is a before and after

Another before and after in the regular game view

more tweaks and improvements to the colours and post processes for day and night,

At this stage I was finally becoming happy with the look we were getting.

It was time to get rid of some of the lifelessness of the “flat” grass.

Trees and Grass

I started playing around with the procedural foliage generator volume in Unreal and we added a texture to the grass material as a shader to create a multicoloured, tessellated low poly texture look to the flat grass surface. Our 3D artist built the shader and I have been playing with some of the variables but it’s not quite there yet.

The foliage generator is great!

The grass material

More grass types for the foliage (also added SimpleWind to make them move), better colours

And finally we changed the look of our water and built a new shader for that

The water material with its tessellation and noise to make it move ever so subtly. From this reference.

And the world at night…

Really coming together but that grass texture needs work…

From a distance

Had lots of issues with shadow distance settings between ray cast shadows and cascade, eventually found some distances that work, but I suspect we will need to do a lot more work to resolve these. you can see the strange AO shadowing around everything happening here at this distance.

And then finally, what the game looks like today:

I’m really glad with what we’ve got going so far but we still have some way to go to get the environment exactly to where we want.

World

The world map has gone through a few concepts since we began. This is a very underdeveloped section of the game and will get a lot more attention much later on. I’ll repost about it again when we have worked on it some more.

Here are some initial concepts:

Flat 2D

very simple 3D low poly

low poly ocean with topological “cut out” flat world and a sun

Finally we decided to go with a world made out of Hexes to better suit a procedurally generated approach. Smaller world space with more replayability. Our 3D artist built these awesome hex cubes to try out a system for it.

A few map sizes. The pieces without colour are undiscovered hexes.

Returning from the scouting trek

A larger map

What it looks like today, in game

Day

Night (still have to deal with the sun one day :P)

Well that’s it for this post. I’ll be posting about the buildings in the next part

Cheers

By Goblin Chief| 2017-07-05T11:24:34+12:00 February 19th, 2016|Art, Goblins of Elderstone|3 Comments

Creating pathways in Goblins of Elderstone

Goblins of Elderstone is primarily a village simulation game, and one of the interesting technical challenges in bringing the village to life is pathing. Not just traditional pathfinding (although that’s a big part of it), but also constructing walkways and bridges to bind buildings into a cohesive network that goblins can easily traverse to go about their daily business. The picture below gives some idea of the overall effect that the designer wanted to create:

Goblin village pathing mockup

The pathing system must accomplish a number of things. First, it has to connect each new building in the village to one or more neighbouring buildings. Second, it has to create paths that either route around or travel over obstacles in the level such as rocks or trees. Third, it has to be able to accommodate changes in ground elevation with features such as stairs, ladders and bridges. And last but not least, it has to look cool!

This post will give a little bit of info about how the pathing system has been created to date, and how it uses some of the Unreal Engine systems to achieve the goals stated above.

Nodes and Endpoints

When the player places a new building in the village, we need to figure out how to connect that building with a pathway of some kind to existing nearby buildings. After some experimentation, we settled on a system that uses PathNode components in conjunction with an overall PathManager. The PathNode component automatically registers its existence with the PathManager in its BeginPlay() method, and conversely unregisters on EndPlay(). The PathManager is responsible for keeping track of live nodes and how they connect to each other, and is able to forge new path connections upon request.

Each building is set up as an Actor Blueprint containing a PathNode component, which in turn has one or more PathEndpoint components that indicate where paths can connect to and from the building. Both PathNode and PathEndpoint are subclassed from USceneComponent – this allows us to position endpoints in the Editor at locations that suit the design of each building. One nice aspect of this component-based design is that we can potentially add PathNodes to other types of Actor in the future – for example, a junction point in a path could have its own PathNode component, thus allowing paths to fork and join.

An example building blueprint showing the path node/endpoint setup

Connecting buildings

When the player decides to construct a new building in the village, they must place it down in a location that can be reached by goblin villagers. In this situation the pathing system dynamically plans potential path connections as the player moves the new building around the level, and displays if a given building site is valid or not based on whether path connections can be made. The system has to be fast enough to recompute new path connection plans every frame without noticeably lagging the game.

Each time a connection planning request is given to the PathManager, it starts by identifying candidate pairs of currently unused PathEndpoints, one on the building being placed, and another on some existing building in the village. The closest pairs of endpoints get investigated first, then more distant ones are considered until a viable plan is created (or some maximum number of attempts is exceeded).

Path endpoint pairs are investigated in order of distance

To perform the actual connection planning between two endpoints, the PathManager queries Unreal’s Navigation subsystem. Normally you’d use this system for things like moving Pawns and Characters around in the level, but it turns out that the Navigation system is very flexible and can also be used for arbitrary pathfinding queries.

A NavigationQueryFilter is used when querying to exclude certain navigable areas from consideration, as we don’t want to create paths that cross over buildings or other paths. Building and pathway static meshes are marked with their own custom NavArea classes, and then the query filter prevents the navigation system from returning pathfinding results that would use those nav areas.

Constructing paths

Once we’ve successfully identified one or more potential routes between buildings, it’s time to actually construct the paths. This is done by taking a pathfinding result from the previous step and ‘drawing’ each linear section of the path (from one waypoint to the next) by spawning a sequence of PathSegment actors. Each PathSegment is attached to a ‘Next’ transform marker on its predecessor, with the very first segment being attached to the RootComponent of the path itself.

A straight section of path showing the origin and Next transforms.

A good portion of the path is generally made up of straight sections like the one above stacked end to end, but there are also a number of angled joining pieces that come into play if the path changes direction from one waypoint to the next, and other special segments such as landings that are used when the path joins with a building, or stairs that allow goblins to access the path midway between buildings. Each segment is defined with a Blueprint Actor class, as shown below. This allows us to introduce custom behavior on certain segments such as vertical ‘elevator towers’, which are needed for goblins to be able to traverse large elevation changes.

Some of the other segments used in the construction of pathways

Each path segment is configured with a simplified collision mesh and assigned a custom NavArea class that lowers the cost of travelling over paths significantly compared to walking over normal ground. This encourages goblins to preferentially select routes that make use of paths when travelling from one building to the next.

A completed path constructed from multiple segments

Obstacle avoidance

One of the nice things about using Unreal’s built-in navigation and pathfinding facilities is that paths will automatically be routed around obstacles, as long as those obstacles are configured with the appropriate collider setup. Unreal does a very nice job of selecting appropriate paths, and seems to give stable results as you move a building around looking for a suitable construction site during the placement phase.

Some examples of paths being routed around various obstacles

Elevation changes

To allow goblins to travel up and down over uneven terrain, we have implemented a system that detects height changes and spawns special segments such as Stairs, Ladders and Elevator Towers to allow the path to cover the gap. Since the Unreal navigation system won’t automatically generate a path that travels up a change in elevation, we detect where the terrain height changes along the proposed route and then split the path route into multiple ‘sub-path’ queries. The sub-paths are then joined up by stairs or one of the other bridging techniques based on the difference in height.

Future work

We now have a system in place that does a decent job of connecting the buildings into a basic village network, but there’s still a lot of tweaking and polish work to do as the game progresses. One major area of work is adding suspension bridges that can connect the second floors of adjacent buildings and also span valleys. Another idea is to add junctions that allow more organic forked paths to be formed as the village grows. It should be a lot of fun seeing how the system evolves into its final form over the coming months! Stay tuned for further updates..

Steve Salmond

@stevesalmond

By Code Goblin| 2017-07-05T11:24:35+12:00 January 8th, 2016|Goblins of Elderstone, Programming|Comments Off

Previous 1 2 3

Find us on Facebook

Recent Posts

Recent Tweets

Archives

Categories