Featured Blog | This community-written post highlights the best of what the game industry has to offer. Read more like it on the Game Developer Blogs or learn how to Submit Your Own Blog Post
This case study goes through the process of how a strategy game unit's visual design was concepted and implemented.
This article was originally posted on the Digitanks website
For this week's article I’ve decided to give you guys a behind-the-scenes look at how the visual design for our CPU structure was decided on. I think I’m going to make this into a series because it interests me a great deal, it’s one of my favorite parts of game development. It’s one thing to let an artist loose on one of your assets and say, “Make it look good!” but with a little bit of forethought and design, a game’s art pieces can be not only pretty but also contribute to the game in meaningful ways. So I’m sharing our design process in the hopes of helping others in their own game development exploits. (Also: if you want to get wasted tonight, it may be a fun drinking game to take a shot every time you see the term “CPU” in this article.)
If you remember from the tank design article, the first thing I always do is establish my goals and constraints. It’s a classic problem solving technique, when approaching a problem where the solution requires divergent thinking, I always start out by figuring out where I don’t want to go.
It’s the largest structure, it needs to interact properly with the terrain even if that terrain is steep in grade.
It’s the center of the player’s base, and the essential thing to protect, the design needs to look imposing or important.
It needs to remind any computer-proficient person of a CPU.
In the case of the CPU we face a number of problems. Digitanks is a strategy game and the CPU is used to construct other structures. It also acts as the source of the player’s “network” and all of the player’s energy expands from it. The goal of the game is to destroy the enemy CPUs, so they need to look like something worth destroying. That means they need to be large, and with largeness comes problems interacting with the terrain. The terrain in Digitanks is dynamically generated and can be rather steep, so large structures need to be able to rest on this terrain and still look natural. And of course, it needs to be reminiscent of a real-world CPU. Anybody who’s opened up the inside of a computer and looked at the mysterious gizmos and gadgets within should say, “That’s a CPU!” when they look at our design. Not all of the structures in Digitanks follow the computer-hardware model, but for the ones that do we wanted them to be obvious enough to the typical gamer who doesn’t necessarily hold a computer engineering degree.
heatsink
A typical CPU has two strong elements in its design, which are purely functional. The actual processing bits of the CPU, a flat square essentially, are hidden from sight below a large heatsink. Processors require these to keep from overheating and melting themselves from the billions of calculations running inside. A heatsink is a pretty recognizable piece of computer hardware, you see them all over the insides of these units, even on parts other than the primary CPU. Graphics cards have them on the GPU as well, and any gamer worth his salt will have installed an upgraded video card and seen this. The other dominating part of the CPU is its fan. These are the things that make the characteristic, reassuring humming sound that computers tend to emit. The nice thing about fans is that they rotate in place. A good animator knows that constant subtle motion is important for making things look natural and stand out from their environment. A fan would be quite an effective marker to help the player recognize the importance of the building. Imposing is not a problem here, I’ve had heatsink/fan combinations that take up the majority of the space inside the computer case.So we’re going to steal (I mean borrow!) heat sinks and fans from real-life CPUs. The problem is, real-life CPUs are built solely with function in mind, they’re not built to be pretty or look good. The only people who ever see CPUs are the geeks in Best Buy who at best actually enjoy poking around inside computers, and those people dress in suspenders and plaid. Let’s face it, CPU designs may look neat sometimes, but only if they’ve been designed by the marketing department, in which case they’re probably not as functional. So we need to take these two basic recognizable elements and spruce them up so that they’re more pleasing to look at. 
cpu1
So, I sent my artist off to do some concepts. Adam’s a fantastic guy and he came back with a pretty good first attempt. Usually I would go for 2d art for concepting, but Adam is able to construct simple things so quickly in 3d that we just skipped that step. As usual with first attempts though, it’s a bit lacking. I think that technically it satisfies the design requirements and incorporates all of our design sources, but it’s not entertaining enough. It doesn’t punch. It doesn’t look iconic. It doesn’t have the fizz bang pop crackle breakfast cereal element. Seriously, I want to feel like I’m watching a kid’s cereal commercial when I look at this thing. Seriously.But, important in this design are the pins. This is how we decided to satisfy requirement number 1. The terrain in Digitanks is fully destructible and it’d have been a simple enough endeavor to automatically flatten the land around any structure that gets placed. However, I thought that would pose more problems than it would solve. What if two structures are placed close together? How would it handle very steep terrain? What happens when the leveled out terrain gets attacked? There’s just too many if’s in that design, and besides it removes what I think is a pretty cool visual style for the structures in the game, which is essentially to place them all on stilts. These stilts can be reminiscent of CPU pins. 
cpu2
On every side, CPUs have pins that carry currents from the CPU to other parts of the computer, and with one stone we’ve killed a bird of terrain-steepness and a bird of CPU-resemblance. These pins would be long and stretch down below the terrain. Placed on a steep hill, some pins would intersect with the terrain immediately and others would extend down and touch the terrain further below. This also creates a space underneath where tanks can be seen more clearly.The next revision was a great improvement. This time we stole a design from a radial heatsink. The radial design works great because it suggests more effectively that the CPU is the center of everything. It also complements the fan sitting so precariously on the top. But with our new radial design, we’ve lost the impact. It’s a bit less imposing now. 
cpu3
The obvious way to address this is simply to make it taller. There’s also the problem of the empty space that sits between the circle and the outer corner of the square, it makes the entire structure look less imposing, which we decided to try to ameliorate by adding fins.The fins didn’t quite do it. They certainly filled that empty space, but not enough to my liking, and they looked too out of place in the context of a CPU. This is when Adam had the splendid idea to take the radial shape and space-fit it to match the inner bounds of that square. It worked great and it was the last element needed to cement our CPU designs. The fins remained, but with a less obvious role.
final
That does it! At this point we’ve satisfied all of the designs and it looks great. It’s a combination radial design with a square CPU shape. It’s similar enough to a heat sink with an obvious fan on top (it spins!) that when my dad first saw it he instantly recognized it before I told him what it was. Also notice the angling of the pins, for a little bit of extra flair.
I like this design because it demonstrates the creative process pretty effectively. We started with our “canvas” of limitations, and continued to throw out bad ideas and brainstorm until we found ones that were good. Neither one of us had a clear vision for what the CPU should look like when we began, but each of us had ideas and we were able to wrestle something good from them. What you didn’t see as a part of this article was the number of sessions that Adam and I sat down and talked (figuratively through emails) about the many designs which came up and how to improve the good parts and remove the bad ones. If we had used the first it may have looked passable, but we’ve ended up with something much better because we didn’t stick on the first thing, and we used each others ideas to make a better result.
In other news, I’ve launched two new methods of communication with me! I love it when people get in touch with me and give me their thoughts on my articles and on the game, so I’ve decided to become active on Twitter again. I used to think (in fact I still think!) that Twitter is for celebrities and socialites, but a lot of people have asked me if I have one, so I figure maybe now it’s time. I’ve also opened up comments on the Digitanks website. Feel free to post your thoughts in the little comment box below each article. Also a quick reminder, if you like what you see you may be interested in in joining the Facebook page or the Steam group. Until next time.
Read more about:
Featured BlogsYou May Also Like
