Our task was simple: create and ship a true to scale world map and two lengthy campaigns on all relevant mobile devices… all while our Design team was actively building and modifying the environments. We wanted to create a world that felt stylized but realistic, vast yet detailed, and rich but performant. These challenges were accompanied with the common challenges of performance constraints and relatively little time. We had nine months.
In theory, this task seems relatively easy to accomplish. Work in broad strokes, iterate quickly, and polish evenly across the game as you go. In practice, when you don’t have time to fully pre-visualize and plan out the entire product, it’s difficult to foresee how big your art bucket is and whether or not your game will grow as you execute. One thing we did know was that our target was going to move. A lot.
We knew we wouldn’t have the staff to take the traditional approach. We couldn't create block mesh for both campaigns while the campaigns were still being designed. We also knew that we couldn’t create all the art before we understood how much of it we would need or what our constraints would be. Therefore, instead of focusing on what was to be created, we focused on how things were going to be created quickly.
Our first order of business was to eliminate redundant clicks and cycles. We built tools in Unity to easily create prefabs and assign existing materials in one fell swoop. We also created a tool to find and replace multiple objects at once. In the event that we needed more proxy shapes, we could swap several at once keeping the original transforms. We also used this tool during the polish phase to add more variety. For example, we started with a single tree, placed them everywhere we needed trees and then during the lockdown phase of a level, we would replace the originals with a variety of other trees.
Utilizing Unity’s prefab system was crucial. We quickly created the essential building blocks, or “proxies”, for the game environments which allowed Design to do an initial placement for gameplay spaces almost immediately. Design and Art teams could now work in tandem.
Quick proxy models and prefabs gave designers obstructions that we could iterate on independently
As Design was focused on building something that was fun, the Art team continued to shape our asset library and solve mobile shader challenges. By keeping the set dressing and stationary gameplay units lightning fast from a shader perspective, we spent our shader instructions on the things that made the most sense. Because our game is diffuse only, the larger rock formations lacked any sort of believable detail so we chose to use alpha blending on the rocks. I realize that this thinking is counter to the norm. Typically we would want our most expensive shaders on the smallest objects on screen. We did the opposite and trimmed elsewhere. I am very happy with the outcome and doing so gave us (close to) consistent texel density and a richness across the environment; one of our main tent poles from the beginning.
An example of a finished level. Note how the proxies from the above image are now in a more final state.
The Bread & Butter
To create the best overall look, we treated our library as a single entity. We didn't focus on making each object perfect. Instead we focused on making the entire library quality consistent. What helped us achieve this was making master files in Maya that contained all of the similar objects. Having that reference available within your 3D package helps keep your vertex density consistent as opposed to just documenting some numbers in a doc that no one will read. All said and done, we fit our entire environment library into three 1k atlases: two for opaque objects, and one for all of our transparency which we used extremely sparingly - not even our foliage has transparency.
This is our entire environment art library loosely grouped from Lush on the left, common assets in the center, and Arid assets on the right. Note the three texture atlases used to texture our entire library.
To keep our detail focused on the units and decorations, we also decided to go with a flat ground plane. We considered full 3D terrain, but we felt that our poly counts should go into the gameplay objects and environment set dressing. Since our game is a strategy game, we had to consider how a non-planar playspace would also impact AI and collision systems, and ultimately our timeline.
For the terrain shading, we achieved some surprisingly good results using the age-old splat map method. Splat mapping gave us control over texel density as well as unique texture placement using just a few small textures. Our splat shader is very simple. Originally, we used RGBA to define splat areas but in our never-ending-quest to stay performant as the game took shape, we got rid of the alpha channel by forcing the shader to tile one of the terrain textures when no color information existed within any given channel.
A typical splat map painted for our Lush levels. Where the splat texture was black, the shader tiled grass, where we painted Red, it tiled gravel, Green- dirt, and Blue- rock.
The final composite of the terrain splat map and splat cards parented to the stationary gameplay units and buildings.
The High Level
Our Strategic World Map went through several visual iterations. Scan lines? Realistic? Stylized? Vectorized? Game board? When we chose to do a realistic satellite image, we had difficulty getting both the world map and the level art to look like they came from the same space. Most satellite images to which we had access to contained clouds and evidence of humans. It was clear we had to recreate the satellite image from scratch without losing the nuances of the real world.
The final look came down to the wire, at the last minute we scrapped everything and started over, which happens frequently. The final approach was the simplest and most elegant solution. We spent about three days in Photoshop designing the look and then executed the following week. It consists of a simple gradient map over elevation data in key locations of Europe. We then used terrain software to render out some basic lighting and even forced some lighting using the green channel of the normal map conversion of that same satellite data. It all started to come together when we used the in-game terrain tiling textures to overlay masked areas. The final composition got us pretty close to where we wanted to be.
The final comps of 2 zones used in our world map. We achieved the look and feel of satellite data without the evidence of man or atmosphere.
When the player is zoomed all the way out, we use the images above, as the user gets closer to the ground, we fade in tiling textures with opacities based on camera distance. The end result is quite believable.
Needless to say, we took a lot of chances; some of which paid off big and others we can chalk up as learning experiences. One thing is clear, this game wouldn’t be what it is today without the tools Unity gave our team. Be on the lookout for War Commander: Rogue Assault to take the mobile market by storm in the coming months. Swipe & Destroy!