Saturday, February 24, 2018

FPS Tower Defense Toolkit v3.0 Dev Log #1: Revamping the Visual Design

The FPS Tower Defense Toolkit was published on the Unreal Engine Marketplace more than two years ago, and throughout most of its life cycle, I had concentrated most of my efforts on the addition of new gameplay systems and refinement of existing ones. Very few updates were targeted specifically at improving the visual design, with almost all of them focused on creating a clean and minimalist UI design.

Towards the end of last year, I rolled out a series of mini updates focused on the introduction of new weapons to the player's arsenal. After spending most of the prior updates on refinements to existing systems, this was a huge breath of fresh air to me. First of all, it meant that I had to do research on a diverse set of weapon systems from a wide variety of games. I thoroughly enjoyed this process. There were so many cool weapons and I just wanted to figure out how they all worked. Then came the act of creating working replicas of a selected few of these weapons in Unreal Engine. And this process had a certain playful feel to it, unlike say, working on something that merely increased the overall efficiency without any visible feedback beyond a change in the number of frames per second. I even enjoyed the final testing process, which is usually kind of a mood buster for me. This experience kind of reminded me of what it felt like during the early days of the toolkit's production.

Maybe it was the tonal shift in the experience, or perhaps it was because I really cared enough about these systems to at least create some basic materials and particle systems (which I do not enjoy working on at all), that opened up my mind to the possibilities outside the narrow path that I was following over the past year of the project's life. I felt the need to add some touch of beauty to all parts of the toolkit, even though I had very little experience working on anything other than blueprint scripting. I did not know exactly how to go about doing that, but before I got around to that answer, life took a sudden turn.

Due to some harrowing personal issues, I had to return to my parent's place. Things quickly deteriorated further, and I realized that all my plans would have to wait as it became more and more clear that the likelihood of getting back to work before the end of the year was rather bleak. With access only to my phone, all I could pretty much do from a work standpoint was to provide customer support for the marketplace products. So I spent most of my time studying games and reading up on what was happening in the industry. Perhaps due to the result of being separated from work, and being exposed to a lot of interesting ideas, I started getting excited about all the things that I wanted to do after getting my life back together.

Fast forward a couple of months, and I was back at work. While going over what course of action to take, I decided to do something about the visual design of FPSTDT. I noticed that the sample map provided with the toolkit had a very dark grey color for all walls and floors which, to be honest, looked quite bland and unappealing. Also, there were no distinguishing features on the map, but I figured that I'll set the groundworks for the artistic design first before trying my hands at level design. To provide a frame of reference for the starting position, this is a screenshot from the vanilla map.

The first step was to come up with some basic vision of what I wanted the level to look like. One idea that had crossed my mind during the brief stint away from work was to emulate the visual design of Mirror's Edge and Super Hot. Basically, two contrasting colors used predominantly over the entire level layout. After trying out a few colors in the editor, I really took a liking to the white+red color combination. However, the whites were not looking as clean as they should and the reds turned out to be a bit too bright. So I tried editing the light source to see if its color was causing this tinted result. I also tried adjusting its brightness to get the desired result but to no avail.

After getting frustrated with my lack of experience working on this side of the engine, I tried using unlit emissive materials to see if they could produce what I was looking for. Not only did not help, but it also made it impossible to see the edges of meshes as shown below:

After not making any headway, I started out with a new map from a blank project. I added in a skylight and a sphere reflection capture and applied an alternating white/red color design to the building blocks. The materials were also given a slightly glossy look. Even though it was a simple barebones map made out of cuboid shapes, it finally started looking kind of beautiful, at least compared to the sample map from the toolkit. I guess anything would look beautiful compared to that, but to be honest, I really liked the way the white+red color combination complemented each other. It created a clear distinction between the floor, the tower bases and the towers.

However, there was one major problem with this design. When
 I tried to spawn towers, it was a bit too hard to clearly identify the visual silhouette of the holograms among the bright white floors.

So what started as an exciting prospect of trying to replicate the aesthetic design of Mirror's edge came to a halt. I did not have any other alternative design choices in my mind, and going back to the default style was not an option. So I went ahead and experimented with the entire spectrum of colors in order to identify other interesting color combinations. The floors definitely needed something on the darker side that contrasted well with the holograms. Even though black is the first color that pops up from that viewpoint, it actually looked ok. It did not look as clean as the alternating white plus red design, but it would have to do for now.

With the holographic display issue kind of sorted out, the next problem to tackle was the washed out in-game look. The skylight intensity was ramped up earlier to make all the surfaces look smooth and shiny. Bringing the value down made everything look very dull. I tried to work around this by adjusting the intensity of the directional light, but without making any progress towards the intended result. So I started going over the skysphere settings to see if it would make any difference and noticed that the sun height of the actor was set to -1. Basically, this causes it to display a night sky. Out of curiosity, I decided to check out if it had any impact on the actual lighting of the level by resetting the parameter back to 1. After doing so, I built the lighting again and tested out the level. With the already ramped up skylight intensity, it was like getting caught in Tien's solar flare scene from the intro of Dragonball Z.

Now I could finally bring down the intensity of the skylight down much further, reducing the washed out look further. Around this time I was also reminded of Racer X's car from Speed Racer, which had a striking combination of yellow and black.

So I threw in a few yellow blocks into the scene as well just to get an idea of how it fits into the scene. I could find no immediate use for it, but kept it around just in case some idea pops up in the future.

The level was then expanded outwards to match the scale of the original sample map as I wanted to get a good comparison. It definitely did look better than before, and unfortunately, I do not have any screenshots from this particular phase, but it somehow felt like there was a definite lack of visual cohesion. I hardly have any experience working on art/level design aspects of the engine, but the power core, with its holographic material, looked kind of out of place for some reason. It later occurred to me that there was no unifying theme holding everything together. Since I did not know where to find that, I decided to go back to the roots. I thought about why I started working on this toolkit and what it felt like back then.

During the early stages of the project, I had no intention of publishing it as a toolkit on the Unreal Engine Marketplace. I was very much into Sanctum 2 back then and just wanted to try building the underlying gameplay systems on my own. So it was more of a fun little experiment than anything else at that point. It was, in essence, kind of like playing with a lego set. You may start with trying to create what was shown in the pictures that come with the box, but then the experience transforms into one where you go around exploring your own ideas. Kind of similar to how you start trying to understand and recreate a game but then end up throwing in your own ideas to see what happens. At that point, it kind of feels like a playground, with you actually designing the systems that form this space more than the act of playing with these creations. So I decided to run with this theme of a virtual playground.

With a basic overarching theme set in place, I went around using basic colors to categorize the different building blocks of the level. For example, yellow floor surfaces to signify enemy spawning areas, green for the power core, etc. That went on for a while, experimenting with minor tweaks to the material and lighting setups, and finally, the new visual design for the toolkit was complete.

There's most certainly a lot more room for improvements. The level design, for one, could really help with an upgrade. But this was a good start. And I will continue pursuing this course of action over the upcoming updates.