Posted by on 6 Nov, 2015 in Fragmental

Once we had an idea of what we wanted to create, a top down fast-paced arcade game a suitable art style had to be found. This went through many iterations some of which you can see below, I didn’t have much time to work on each of these iterations and the biggest issue was readability between the level and the various players and cutting down any unnecessary visual noise.

Due to the speed and competitive nature of the game it was really important the art style supported the gameplay rather than hindered it, It’s no fun if you are killed due to a badly signposted threat in the level.

I quickly found that a seemingly simple cartoony texture would become a noisy discordant mess when viewed through the game’s camera – this is about 300m in the air for the largest maps with the players sometimes a few pixels tall, which greatly magnified the problem.

 

Due to the camera being so far out and fixed, there were also issues with the perspective. It could be extremely difficult to tell if a platform was above or below you, so many of the early maps are all on the same flat plane. This is being solved by using shadows as cues to tell the height and depth of objects, as well as having gaps showing the music scene – which are what we refer to as the backgrounds that sit beneath the levels – in between different sections, and an edge trim around the map edges to highlight a dangerous edge that the player could fall off.

 

ArtStyle1

 

The above screenshot was the first pass on the art style I created based off one of the first levels that were created. Its missing the music background, uses a stock UE4 character but while never completed in any way it shows initially we wanted to base the levels off real world locations and add a stylised, hand drawn spin to them.

In this close-up shot you can see I was still torn between using normal maps and basic roughness values, and all the good things that UE4 brings, against using simple flat textures with faked lighting and depth.

 

ArtStyle1_a

 

I decided to massively simplify the materials – strip out any normal, ao maps and anything else that could be regarded as expected of a modern game in Unreal 4, and just use simple colours set to full brightness to improve readability.

Despite the textures being incredibly simple with just flat diffuse and literally hand painted shadows and highlights, there were already hints they were still too noisy. The players could too easily become lost in the brown tiles, and even with the blue edging around the outside of the playable space, it wasn’t clear where you could go or the angles you could shoot other players from. These were core to the game so they had to be simplified.

 

ArtStyle2

 

The above image shows the first pass of simplification, I didn’t change anything regarding the layout or meshes of the map, but I added an edge detection postprocess pass to help pick out and highlight edges, and define potential angles and also forced all the textures to use a higher mip value, so they are reduced to the averaged block colour. This helped in terms of readability, but there was still the issue of visual clutter, and the players and their opponents getting lost amongst it all.

 

In the end, the real world locations were dropped, and we decided to go for a more abstract approach regarding the levels. This helped hugely as I didn’t have to worry about making it clear that a level was for supposed to be a bank after a robbery had taken place, and ensuring that everything was clear and readable to the players. The image below was another style I tried out. It used simple white walls with no texture, to try and get a cleaner look. All of the visual detail comes from the clouds shifting across the sky below the map and how the background elements were arranged. While this looked better at this scale with very little polish, it didn’t hold up when applied to larger levels. The transparent floor was a quick test to see how it would look when more of the background was visible against the playable space, which turned out to be a bit of a mess.

 

ArtStyle1_b

 

This lower shot above was inspired by Mirror’s Edge, using more detailed meshes with very simple materials to try to show more of the background against the level, depth of field was used in this example along with some scattered cloud particle effects to enhance the sense of depth, and help to separate the playable space from the background. Again like the previous attempt, it didn’t scale up well to larger levels, with the gaps between the meshes becoming lost when scaled out for the larger maps.

At this point I had learned that while the actual playable space had to be very simple, and follow a strict set of rules to avoid confusing the player, the background could be much more visually cluttered which would eventually lead to the scenes reacting and changing to music, and would reinforce the eventual 80’s futurism theme.

 

ArtStyle9

 

For the shot image I decided to completely restart and go for a more stylised cartoony approach. This was inspired by the many ‘low poly’ environments scattered around the internet, it also gave me an opportunity to add some movement to the scenes – so the grass, flowers and tree canopy swayed softly in the wind, while the rudimentary sheep nodded their heads. This style did not use any textures and was instead entirely vertex painted, which meant that scenes could be gone through and touched up and altered simply by painting onto them if need be.

While the style worked even on larger maps, the tone was found to not quite match the gameplay, which at this point still had copious amounts of blood splatters and there was a strange disconnect between the gameplay and the style of the art.

 

ArtStyle10WIP2

 

The above shot was the final attempt before we settled on the final art style, but you can already see hints of the final look in the shot. The darker shiny floor is present although not as dark and shiny as the final look, the pulsing wireframe shapes are visible but were later pushed out to be only visible in the music scenes and not in the playable space, as it was found to ‘soften’ the edges too much and make it unclear if the player was in cover or not. Additional hints at gameplay colouring for the half height cover is also visible, although in this instance it’s blue instead of the white it is the current build. This was also the last instance of using ‘complex’ shapes until we eventually settled on the simpler and more abstract bsp based levels. Our next post will focus on the creation of a game level using this approach.