Weapon Concepting

Posted by on 22 Nov, 2015 in Fragmental

Today’s blog post is about weapons, and focuses on how their art style was defined after going through various stages of concepting and simplification, before they were broken down into their most basic elements.

The most important thing for the weapons were that they were easily distinguishable from each other. They are 3D models, but they actually appear more like icons within the levels. The goal for each weapon design is to be easy to read and understand and clearly visually distinct from each other. There are currently 22 weapons in the game, so we want to make it as easy as possible for the player to learn which weapon is which, and then be able to tell what weapon options each level has at a glance.

The first step in the weapon design was to draw some simple silhouettes for some of the weapons, we knew we wanted the weapons to be angular and to sit comfortably into the low poly ‘crystal-like’ look that defines Fragmental visually, but we were unsure to what extent, and how far they would be removed from traditional weapon elements like grips, rails and iron sights.

So I drew two pages of thumbnails for the Crossbeam and Disc Gun weapons focussing entirely on just the overall silhouette.

 

CrossBeam_Thumbs

 

Then, along with Gary – Artist / Animator – and Billy – Creative Director – we agreed on which one we liked the most, then I created the model. I knew due to the distance of the game camera and the low poly style of the player characters, that creating an initial high poly was out of the question, so I went straight into creating the low poly in game version which you can see below.

 

CrossBeamMesh

 

At this stage I was still leaning towards creating physically correct materials, which had consistency issues down the line with the visual style we had defined for the characters. Even though the weapon is low poly for a modern game, it was still far too high poly to match the visual style of the characters, which take a more stylised, abstract approach using low poly faceted triangles. At this time it wasn’t clear how the overall weapons would look in 3d space, as all I had to base anything on was a flat black thumbnail. With no guide to work from apart from the black silhouettes, I found myself simply making things up as I modelled it, which can be dangerous when you’re supposed to be staying true to the art style we had defined.

So, I decided to concept the rocket launcher in more detail, I drew four more detailed concepts than last time. Focussing on trying to show the angled faceted look, and hopefully retaining something which read as ‘rocket launcher’, while trying to reduce any recognizable real world elements.

 

RocketLauncher Thumbs

 

This additional detail wasn’t sitting well with the characters though, as they used very simple and limited materials and we wanted the weapons to do the same – these new concepts had too much internal detail, they had to be more abstract. At this point Gary – who has previously written about weapons – drew some very simple but distinctly different silhouettes for each weapon based on what I had initially done, but was thinking of them more as icons within the map.

It’s important that the weapons look somewhat like their real world counterparts, but it’s more important that they fit with the art style and they’re different to the other weapon models within the level; this way the players can quickly learn what each weapon is as they play.

So I took one of Gary’s very simple outlines for the flame thrower, quickly blocked it out and embellished it with as much detail as I dared. I followed  a number of rules which I try and follow for each weapon, which along with the consistent material work also helps with the consistency of each weapon. These weapons had the benefit of looking more grounded in the world, not more detailed than the player characters, and due to the low poly blocky look, they relatively fast to create, iterate and change if required. I don’t even have to worry about UV’s being stretched or warped as it’s just block colours with additional material work.

 

Flamethrower

 

Once we had a pipeline of Gary creating the initial icon-like shapes, and that being agreed on, I could quickly take these shapes, embellish them and add the required mapping and materials. Then I could create the fracture mesh, apply the node placement for positioning on the spawn points. When this was all done, we could have a look at them in game.

 

FinalWeaponShot

 

We now have a good first pass of all of the weapons in the game. We’ll obviously need to tweak them as we go on, but at least they are all in game and are visually consistent with the rest of the game. There’s still some work to do, but at least we have a solid pipeline and process in place, so any additional weapons we add to the game will have a far more streamlined journey from concept to final game.

Art Style Investigation

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.