08 Sep 2016

Designing ship sprites

by Michael Zahniser

The risk of designing a ship in Blender is that it will come out just looking like a jumble of geometric shapes, or too boxy and tied to the grid. So for most of my recent ship designs, I’ve been drawing them freehand on paper before modeling them in Blender. In just a few minutes of sketching, I can get a sense of whether a design is going to “work” or not, which is a lot better than spending an hour on building a model and then deciding the whole design idea just doesn’t work!

A sketch of a Summer Leaf ship drawn on paper with pencil

Your first goal in a concept sketch should be an interesting silhouette. No matter how much detail you add on the interior of the sprite, if the ship’s outline is just a simple geometric shape it will look artificial and simplistic. This is also the point where you should think about the visual balance of the ship as a whole. When you’re drawing a portrait, it’s easy to get so focused on drawing the nose or eyes just right that you forget to put them in the right relationship to the rest of the face and they end up too big or too small or in the wrong position. The same thing is true for ship sprites: making the wings or the cockpit a bit too big or too small can make the whole thing look awkward. Working with a sketch lets you tweak the big picture balance before getting too bogged down in the details.

The concept sketch phase is also a good time to think about developing a consistent design language for a particular species or shipyard. For example, all the Wanderer ships include the basic spearhead shape from the Summer Leaf, all the Kor Sestor ships include a dark, smooth “shell” and a lighter, greebled interior, and all the Kor Mereti ships are built from the same modular components. If chosen well, that design language will also communicate something to the player about the “personality” of a particular species or faction.

A third thing to think about when sketching a ship is how to vary the level of detail. In musical performance there’s a saying: “play the rests.” In other words, treat not just the notes but the periods of silence as an integral part of the composition. A song that’s just one giant drum solo, even if it’s a brilliant drum solo, will get monotonous. In the same way, make sure that your ship design includes areas of intricate detail, but also smooth areas with no fine detail.

The Summer Leaf shown inside Blender

Of course, translating a sketch into a good-looking 3D model is the difficult part. The paradox is that even though a spaceship is an entirely artificial object, it will be much more interesting and visually pleasing if it looks natural and organic rather than being clearly artificial. A few things I’ve found helpful:

The final step is to export an image and post-process it. To keep things simple, aim for a final sprite with dimensions that are a multiple of 10. This avoids issues where the @2x sprite is not exactly twice the size of the @1x sprite. (For example, if you shrink an image with a width of 1000 to a 167-pixel-wide @1x image, its @2x width will be 333 pixels.)

Before doing any post-processing, test out different sprite sizes in the game to see what looks good and fits with the existing ships. Then, re-render the image at exactly 2 or 4 times the intended sprite size. Also make sure the @1x image will have at least a 1-pixel blank border on all sides so that the outline will render correctly.

A Summer Leaf divided into four quadrants, with different effects shown on each

The goal of the post-processing is to dirty up the sprite so it doesn’t look like so obviously computer-generated. My first step is usually to overlay one or more metal textures, each using the “soft light” blending mode, and using the eraser to control what parts of the ship receive each texture. Even really grungy or rusty textures can work well here, but if the texture is too colorful you may want to reduce its saturation. As with all the design steps, the key is not to overdo the effect, but to keep it subtle.

The next step is to add artificial shadows and color gradients using the spray paint tool in a “multiply” layer. In the real world, metal looks metallic because of how it reflects things around it; painting dark patches on the edges or corners of parts of the ship can simulate that effect. Darkening the entire left side of the ship can help to make it look more three-dimensional, and darkening the edges near the engines simulates residue from engine exhaust. I also paint color over the colored parts of the ship to add variation in the hue.

When you’re ready to shrink the image down for export, I’ve found that ordinary bicubic interpolation works best: it adds a tiny bit of acutance, but without the obvious overshoot artifacts created by interpolation methods that sharpen the image before shrinking it.

The Summer Leaf shown fighting in-game

To sum up, here are a few general principles to keep in mind:

For more inspiration, check out the concept ships blog. Notice how most of the artists overlay hand-drawn effects over the 3D renders to make them look less artificial or to bring out certain features.

Unstable release 0.9.3 »