Jun 23, 2017
Methodical Rigor: Revisiting Valve’s Game Design
In 2012, I broke down Valve’s rendering techniques. Five years later, I’m on an adventure to briefly peel back a few more layers.
Valve Corporation, an internationally-renowned game developer based out of Bellevue, Washington, has innovated modern game design in numerous ways.
In 2007, they introduced how illustrative rendering pertained to Team Fortress 2’s development — an approach that would forever change the perception of a video game character’s recognition and identity complexity.
A decade later, DotA2 utilizes these techniques, alongside others, in a more refined fashion. Focusing mainly on hero creation, with a sprinkle or two of additional coverage, we’re going to look at what makes the game beautiful.
Illustrative Rendering: Real Recognize Real
A critical component to Valve’s game design(s) that never got due recognition. Illustrative rendering is a technique which allows real-time shading to mesh with carefully-calculated design choices to produce unique distinction among characters.
Valve’s characters are renowned for story-building and identity. Team Fortress 2 solidified this by doing two seemingly simple, yet near impossible things: telling a story through concise dialogue and design at a level beyond brilliance— a feat very seldom seen. Silhouettes, as we touched on in Overwatch, must be pronounced at first glance, as they serve as a trademark for a character. The first step of many in design, creating a 2D identity is just as important for branding as 3D.
Then there’s the gradient makeup of a character, varying based on the purpose of that character (along with vibe you’re going after). Focal points of a character’s identity lie within the correct shading, mixed with the value of gradient within said shading to produce a memorable and long-lasting impression with the player.
To care for the foundation of design itself at the foundation-level is to care for the player’s impression down the road.
When more precise concepts like directionality come into play, affecting literal perception naturally occurs. When you look at something from different angles, how does it change? How does this affect the style? How can we smooth out the rough edges (literally)?
It’s been exactly a decade since the idea of illustrative rendering within Team Fortress 2 was introduced at the global symposium for NPR-related material. Since then, more techniques have been applied by Valve to create the fascinating world of DotA2, but the basis is still the same. Taking principles from games past, the game’s design makes it evident that the roots from which it came from are still recognized and respected. Before going more in-depth about how Valve’s going to use this in the future, let’s look into color an why it plays such a huge role in the game’s overall appeal.
Color Theory: How It Affects You
Colors evoke emotions, and affect us in ways subconsciously. This is yet another layered component to game design which Valve takes into serious consideration during the development process that many game developers skim over. In fact, they’ve gone so far as to hire a professional psychologist to make sure the user’s experience is the best it can possibly be. Each color in its own right may mean something different to each person, and the palette used for each in-game object is critical in the overall presentation. This may include characters, items, maps, and even user interface(s).
We see the exact same approach transfer from Team Fortress 2 into DotA2, in classic Valve fashion — less is more. A huge general rule of game design is efficiency, and color theory is no exception. In fact, it’s one of the main focal points of overall game presentation. Colors seem off? A domino effect may very well occur, subtracting appeal from the end product.
Warm colors evoke stronger emotions, while cool colors tend to relax the user. For a game of DotA2’s scale to be sound color-wise, the design and composition must mesh naturally with subject matter, in a balancing act of artistic expression.
We can observe a very well-executed balance between the Map’s makeup — Radiant versus Dire. A cool, bright, relaxed faction clashes with a warm, dark, evil one. How’s this work out so flawlessly? Harmony through color is a large piece of the puzzle, working together with structural components to create an appealing and eye-easing transition between the two factions.
We see Radiant near the bottom, lush with forestry. Above that is Dire, pillaged and burnt, void of all life. Two extremes, meshed and transitioned well, adhering to a minimal yet effective color scheme. Remember, the Map is what every match is played on, touched hundreds of millions of times by tens of millions of players around the world — a lot of care has to be put into areas with high traffic.
Then there’s the color palette used on in-game heroes themselves, varying with the characters utility and overall design. Color is difficult and at a design level, can be something that changes more than anything. What we can see in DotA2 is strange, yet powerful — characters have very few unique colors on them, but are portrayed in a way that is still very appealing and distinct. Remember, the entirety of Team Fortress 2’s color scheme had 16 colors.
Keep color harmony while painting textures by only introducing new colors using blends of the original primary, secondary, and tertiary colors along with grayscale values.
A rule of thumb for selecting a palette of base colors: never select too many. When selecting too many colors, you indirectly weaken the impact of other colors. This however can be an exception when catering to certain parts of something, such as breaking this to adhere to an area on a map’s theme, or a certain Workshop gear piece. Regarding indoor and outdoor atmospheres (or with detailed character shading), the base color amount can also fluctuate.
It’s extremely difficult to achieve a balanced set of visual choices, taking into account technical details and game-play elements which influence the overall design and approach to development of a game on DotA2’s scale. Valve has taken full advantage of color theory (much like Blizzard), and has made it have a huge impact on the overall design. This is very appreciated, and something other game developers should catch onto.
Illustrative Rendering: The Confusing Stuff
We’re back. Let’s focus on how Valve has stated they’d adapt to future applications using this stuff:
In future projects that call for illustrative rendering, we would like to further extend the model described above. For example, we have already experimented with extending our modification of the traditional Lambertian term to increase saturation of the particular hue of the albedo texture.
The modification stated above in regards to Lambertian reflectance being used in the future refers to the diffusion of reflection off a matte surface. Think of a character render, but flat in style, despite being 3D. Non-reflective in nature, natively. In reference to the aforementioned application of hand-painted albedo textures (albedo being the color of an object sans lighting properties; diffuse being with said properties), we could see this type of diffusion technique applied to real-world textures, later integrated directly. Specifically building textures and roofs, or something like clothing for heroes. Valve make things reflect nicely (while dispersing it evenly and in a balanced way). Remember: albedo and diffuse are different.
What we’re doing here is seeking out a good canvas (surface) for our art (diffusion and reflection of light), then modifying variables to assure we diffuse the light and reflect it upon that surface in the best way visually possible. When dealing with matter like this, algorithmic efficiency is mandatory; faults and hitches eventually cause catastrophe. Valve is efficient with their math and programming.
Seen above, a preliminary rendering of in-game hero Dazzle getting ready to be slapped with some texturing and details. A professional level rendering can’t be credited to one single technique; remember, it is about balance and harmony through which excellence in design is achieved. See the finished product a little ways down.
The biggest challenge of creating assets for a game like this is to push detail and design as far as I can, while keeping it within the polygon and texture restrictions at the same time. It may sound kinda obvious, but it’s actually quite hard to keep the necessary balance between “awesome” and few thousand polygons with a handful of 256 textures.
The way light is reflected upon a surface is very important, as it sets the tone for how the object or model is viewed, in relation to directionality which we covered earlier. Oren-Nayer reflectance is a reflectivity model which is often used in the realm of video games (and one could assume in Valve’s designs) — remember those spheres up above? They’re shaded a bit right? We need to add another ingredient. Valve makes reflections pretty, while adjusting value of intensity.
Note that both the aforementioned Lambertian and Oren-Nayer properties are in regards to reflection on surfaces (smooth, hard, etc.) — we’re missing the shading. This can be achieved through the Phong shading model. Sounds weird, right?
Now take a second to breathe here and remember something important: Team Fortress 2 specifically used the original Phong model, where Valve engineers modified it to produce a more smooth and blended color and shade shift. It’s plausible Valve has adapted the newer and better Blinn-Phong technique. Judging by different values and outputs, I would also guess they use a higher exponent flavor of the method to achieve the best results possible. As far as internal BDRF integers that Valve used specifically on DotA2, we’d have to dig a bit for those. Valve uses a newer but similar technique of shading (maybe).
Note this is basic surface-level analysis of an extremely deep and complex rendering technique, containing nearly infinite roots. There are many categories and approaches within each technique, which blend together to produce an end product — a hero, object, in-game asset, something like this.
As video games evolve, newer technology can be applied in a calculated way, mixed in with rules of past designs being applied, built to flourish and succeed. This goes to show that Valve was ahead of its time, nearly a decade ahead of the industry at large, and continues to push the boundaries of game animation and design forward.
DotA2 Workshop: Know Yourself, Know Your Worth
Confidence instilled into hopeful game designers by Valve is a massive reason for DotA2’s success. The Steam Workshop allows anyone willing to put time into creating a viable product for others to use in-game, to submit their own original work and publish it to the masses. Work which is curated and selected by the community’s vote is then considered for actual in-game implementation and sale, for which the creator can receive compensation.
Pushing designers to use their best efforts on their own unique creations while exploring and encouraging artistic value and style within a video game’s community on this scale is unparalleled — bar Team Fortress 2. Lush and expansive tutorials are filled with suggestions and guides for everyone from the newbie gamer to industry veteran, opening up the offer to anyone.
With recent drama stirring around the modding community of Grand Theft Auto V, we need to step back and remind ourselves how much liberty we have with Valve. Yes, the paid mods situation in ’15 was horrible (which I covered during E3), but Valve listened.
You need to know yourself and know your worth, putting forth your greatest efforts to achieve excellence through artistic expression. There are literally infinite possibilities with the Steam Workshop (specifically the DotA2 Item Workshop).
The base game is pristine, but adding onto that is a voice from the community — a piece of passion from the players themselves inside of the game, for all to enjoy. That’s a big part of what makes DotA2 feel so connected as a game. This was definitely explored much more in modern times compared to Team Fortress 2 and the days of its Marketplace.
Community engagement is an issue that has been definitely been something that has raised eyebrows lately in regards to esports tournaments and Valve’s lack of input on various situations, but it seems as though they are turning their head and listening a bit. The Workshop is a massive plus, a conduit for those without a voice to express themselves, making communication closer each and every day with tens of millions around the world.
Dynamic Adaptation Is Necessary
It is a given that the gaming industry, video games in general, and the technology that we build video games with evolve rapidly. By adapting dynamically to these things, Valve stays ahead and among the best in the world.
A premier esport with the most money awarded, the largest Workshop pumping out tens of thousands of creations from upcoming and professional game designers around the world, and on top of all of that, a game that is constantly kept up to date with a rotating meta and in-game events.
Awards, recognition, and high praise are all results of many ingredients, but mainly, master class game design.
Aforementioned rotation of in-game mechanics alongside the overall design of the game work together and create an incredible community that both supports and encourages the building of integrity.
Leading the way for information regarding various match-ups and picks is DOTABUFF, an incredible resource for all things DotA2, from tournament results to win percentages to meta shifts and how they impact the game.
The International 7 is set to be the largest esports event in history, with a prize pool being accumulated each day, nearly $4,000,000 more since I interviewed Capitalist just two weeks ago. This is a tidal shift in the landscape of competitive gaming as we know it. It’s also something that is the result of a near-perfect layout and execution of interesting yet unique game design philosophies that have been put to the test over a decade by Valve.
Coming Up
This is a series that I hope to pry into more and more over time, learning about the game design of Valve along with the reader. Today we took a look at how Valve (and creators) may form a hero in DotA2, along with a few techniques along the way.
It’s no question that the intricate design of this game is something remarkable, and there’s a lot more to it we’ll be uncovering in the future.
Remember that not every design technique has been 100% verified by Valve publicly, and most of my assumptions are educated guesses based on previous (publicly-released) documents and presentations from Team Fortress 2.
After reaching out to several Valve employees (current and former), most that replied stated they are under extremely strict NDA and can’t divest information regarding, relating to, or adhering to any internal procedures used to develop the game itself (if not previously released). This includes concept art. Whether or not illustrative rendering was actually used as a technique has also been a question I’ve yet to get a solid answer to, but all signs point to yes.
Next time, we’re looking at why light is so important.
TL;DR
- illustrative rendering is cool, like a cucumber, so don’t sleep on it
- silhouettes are important; it initializes character identity and branding
- Valve truly cares about its players; this is evident through foundation-level design philosophy and technique
- direction is important literally and figuratively
- color is important, not cheesy; respect it, and utilize its power efficiently
- Valve uses reflectance models, albedo textures, shading models, and efficient programming to achieve extremely humbling results in design
- be confident; anyone can create anything with free tools given to us by Valve; utilize them
- to succeed as a large (immense) video game community, constant change and adaptation is the key to happiness; big up Valve for excellent work
Related:
DotA2 Discord
DotA2 Subreddit
