Mike’s Dev Diary – Art
Hey guys! Mike McCain here, I head up the art team on Shadowrun Returns. The other week all of us at Harebrained were very excited (and a little nervous!) to give you guys a first look at Shadowrun Returns in action. The response was just fantastic – your enthusiasm at seeing the game for the first time has us even more excited about making it. We’ve lots left to do, but things are really shaping up. Today I’d like to take you behind the art shown in the video – we’ll look at how art in the game works, and then see how a finished scene comes together.
Isometric Art
Shadowrun Returns mixes 3D characters, lighting & effects with a 2D isometric environment – a decision made early in our Kickstarter campaign. This hybrid approach gives us the best of both worlds from both a visual and art production standpoint. By going “old school” with 2D environments, we’re able to create much broader and more intricate environments than we’d have the time for in a full 3D game. Plus, painting the building blocks of the world directly allows us to stand out more with a rich, detailed rendering style.
Seattle’s Pike Place Market, 2054.
2D isometric games generally use either pre-rendered environments (the Infinity Engine games) or tile-based environments (Fallout, Arcanum, Diablo). Pre-rendered environments are ultimately hand-crafted by artists and “baked out” as a single, finished environment – whereas a tiled environment remains a collection of many assembled parts. It’s a plastic toy vs. a box of Legos. Shadowrun Returns uses a tile-based environment. While a pre-rendered approach could provide some more artistic freedom, modular tile-based art is more production-friendly and offers our designers far more flexibility to create and iterate on complex tactical combat spaces. It also, importantly, lets all of you guys build your own environments in the editor using our digital Legos!
Digital Legos!
Welcome to the Grid
There are several types of isometric projection commonly found in games, each with pros and cons depending on the needs of the project. For Shadowrun Returns, we’re using a symmetrical 2:1 near-isometric view.
Some building tiles and how they fit along our isometric grid.
This means the camera is angled such that each diamond on the game grid is exactly twice as wide as it is tall. It’s the most common type of isometric projection found in games, I think for two reasons: one, it tends to looks the most natural (partially because that slight squish fakes a foreshortening effect in the world), and two, it’s the fastest and most efficient choice from a production standpoint. Because the grid is symmetrical, props can simply be flipped horizontally for use in the other direction. In addition, because the proportions of a grid space are exactly 2:1, we get some nice shortcuts when painting – for example: take any image, rotate it by 45 degrees, then scale it’s height down by 50% – now your image is flat on the isometric plane.
Anatomy of a Prop
Environment tiles generally fall into two categories: structural tiles (walls, floors, buildings, doors) and props (everything else, more or less). Depending on the complexity of a piece, we’ll either start with some rough sketches or a basic 3D model. Here’s a couple pieces that some of our interns painted for our Barrens and Tenements tilesets. Over the course of production, we’ve developed a painting guide that helps keep everyone’s work efficient and consistent. (The painting process is likely another diary topic entirely of itself!)
Some examples of finished props.
Once props are finished and approved, they need to be setup for use in the game and editor. This process involves defining the different isometric facings of the prop, establishing how the prop should sit on the isometric grid, setting its gameplay properties (can I see through it? move through it? shoot through it?) and determining how the prop should receive light.
After this, our props should be ready to go! Our editor makes it easy to browse props (you can filter by multiple keywords) and drag them into the game world. Arrange a bunch of props and tiles in the world and, voila, you’ve got yourself a level! (Okay, it’s slightly more involved than that, but you get the idea. : ) The process of laying out and iterating on a level in the editor will be the topic of a future diary from our design team.
Tighten up the Graphics on Level 3
The big downside to tiles is, well, when you first put them down they really just look like a bunch of tiles. Here’s some of the stuff we build on top of the base scene layout to make it look snazzy.
The base environment layout in our editor.
More props! – This environment may be structurally complete, but our Lego box includes a lot of really cool decorative elements that we can add to spice things up. Want some graffiti? Here’s something about how “The SINless are free” – seems appropriate. Or how about some scaffolding for this building? Adding this extra layer of visual interest doesn’t change anything fundamentally about the scene layout – but now this intersection feels grounded and lived-in.
Layering on decorations and other elements to give the scene depth and motivation.
Lighting - Thanks to some really cool engineering work, we’re able to place directional and point lights within our environments. How does lighting in a 2D game work? The short version is, our art is projected onto some simple 3D geometry so that each prop or tile can receive light from the appropriate directions. Placing lights in our editor is a bit fiddly, but with some trial and error you can get some really nice results from it. (This is an example of what we meant when we said the editor would be “powerful but ugly.”) As you can see below, adding just a few lights immediately imparts both mood and focus on the scene.
Adding point and directional lights to the scene.
Environmental effects – Yes, Seattlites like us know that it doesn’t actually rain THAT much here.* But rain is such an evocative (and noir-appropriate) effect that we’re going to be playing up the “it always rains in Seattle” stereotype a little bit in Shadowrun Returns. The fullscreen rain effect here instantly adds depth and liveliness to the scene – other localized effects contribute as well, such as steam rising from a vent.
The finished scene in action!
Putting Minis on the Board
All of this stuff’s great, but the set serves no purpose without some actors. Characters are the focus of both story and gameplay – our environments and effects exist, first and foremost, to support our cast of characters and allow them to take center stage. One of the challenges we face here is that our characters in the game world, well, they’re actually pretty damn small. The camera in Shadowrun Returns stays relatively zoomed out, in order to provide the player with a good tactical understanding of their surroundings. (There’s nothing worse than trying to send a drone around back to flank your enemy while feeling super-confined by a camera.)
As a result, we put a lot of effort into optimizing what we’ve been calling the “iso read” of our characters – the simple, large shapes, colors, values, and high-contrast areas of a character’s silhouette that allow the player to identify them at a glance. This is absolutely critical to gameplay – not only do I need to recognize Lone Star from lab tech, but I need to be able to distinguish between Lone Star grunts, captains and hired spellslingers at a glance during combat. It’s easy to go crazy with details, but if we don’t first make sure there’s a big iso read there, it’s just going to be so much indiscernible noise when the character is 50 pixels tall. Once a strong read is established, our character artists have gotten really good at adding nice secondary reads and small details to the character at a low enough value contrast that they enhance without distracting – and without causing it to become a chattery mess of pixels.
Revision on a mage archetype outfit to read better at iso.
In addition, it’s important to make sure these characters don’t get lost in the very detailed world around them. Characters have to take focus during gameplay, and you should never not notice an enemy that your character has awareness of (and line-of-sight to). Here are a few things we do to ensure our characters “pop”:
Gradated value scheme – We design our characters to be darker towards the bottom, and brighter towards the top. This helps exaggerate their depth in the scene, and draws the eye up towards focal points on the upper half of the character.
Contrast & saturation – We try to save the highest contrast and greatest saturation in the game for characters. In fact, a couple weeks ago, Kohnert setup a custom shader for the characters so that they receive a bit more fill from lights in the game world.
Highlight states – Like most games, we employ basic edge highlighting around characters to indicate things like which character is active and which characters are targetable enemies. This also ensures that characters remain visible even when partially occluded by the environment.
Some example character outfits.
As you saw in the alpha video, when all of this comes together – characters that pop, a compelling environment design, lighting and effects, animation – you end up with a pretty sharp-looking RPG!
What was that about a katana?
Signing off
When we started this project there were three of us on the art team here at Harebrained; then Kickstarter happened, and now we have over a dozen artists in the fold. We’ve been able to assemble a really amazing art team all around, and everyone has been working incredibly hard the last several months to bring this world to life. I’d like to thank you guys, the Backers, for the opportunity to work with so many great artists (and designers and engineers too!) on this project.
And that about wraps it up! I hope this has been a useful look behind the art of Shadowrun Returns, and I’m excited to get the finished product in front of you guys this summer.
– Mike
*Except October through May, when it rains all the f*cking time.
