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.

pikePlace01

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.

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.

breakdown01

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.

breakdown02

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.

breakdown03

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.

srr_screenshot02

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.

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.

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!

lab02

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.

28 Responses to “Mike’s Dev Diary – Art”

  1. RC
    March 22, 2013 at 4:00 pm #

    Totally WIZ!! ^_^

  2. Caimbul
    March 22, 2013 at 4:16 pm #

    I just want to say thank you..

    So shiny.. So happy…

    Shadowrun LIVES!!!

  3. Farnball
    March 22, 2013 at 4:21 pm #

    This game can’t come soon enough :D

  4. Brian Bond
    March 22, 2013 at 4:21 pm #

    Awesome stuff. I really also like the way in the Alpha Video the combat is very fast paced and varied compared to most turn based RPG’s such as an old school Fallout 1 / 2 or other classic CRPG’s. I feel like you guys have perfected the old Shining Force style game or Mass Effect combat in a turn based form. The board game prototyping really paid off. Anyway, with regards to this article, I was wondering if for lighting you were using normal maps? I was considering making a similar tile based isometric game awhile back and thought you could just get away with just a few normals for the environment that all the tiles shared. I was curious if that’s how you were doing lighting, if you have per a texture normal maps or if it’s just a couple of generic directions like I was going to do (which I think was alluded to in this article)?

  5. Rui Castro
    March 22, 2013 at 4:36 pm #

    This was the best, thank you

  6. Jeff W.
    March 22, 2013 at 5:06 pm #

    Hip hip hooray. This was a very informative article. I honestly can’t stop thinking about this game, I want to make the greatest campaign ever. Hip hip hooray.

  7. mudd1
    March 22, 2013 at 5:53 pm #

    Damn, I really like the cape of the first mage revision. The one you decided not to use :/

    Other than that: awesome! The 3D lighting in a more or less 2D environment is a miracle.

  8. James "Johnny_Memphis" Lee
    March 22, 2013 at 5:56 pm #

    Great looking stuff, Mike. Thanks for giving us a preview into the power of the editor.

  9. McDougle
    March 22, 2013 at 6:26 pm #

    A-TEAM VAN!

    You are making me proud… and I got a ton of players that´ll laugh(someone always has that Van… even in SR4 ;) … “Yeah… it´s basically the Van from A-Team…”)

  10. McDougle
    March 22, 2013 at 6:28 pm #

    And I´d LOVE to get my hands on that painting guide. ;)
    (a character/clothing mesh-ing guide would be as appreciated :P)

  11. McDougle
    March 22, 2013 at 6:44 pm #

    Gotta say this reensured me that those additional bucks were well spent… I want to get my hands on that editor & fancy art ASAP. ;)

  12. Coanunn
    March 22, 2013 at 7:29 pm #

    Completely Wiz! I can’t even begin to describe how freaking happy it makes me to see a 2:1 isometric strategy title coming out! Then you bolt on the fact it’s Shadowrun? Jordan is part of the project? It’s a painted art style?

    Yep.. at that point I got brain burn and had to reach for the plug.. anything more and I’d be fried!

    Keep it coming guys! I can’t wait to get my hands on the editor and start building runs for my friends.

  13. Cùran
    March 23, 2013 at 3:22 am #

    You guys (and gals!) really know how to amp us/me up. Thanks for the look behind the scenes. Hopefully, I can start playing this soon.

  14. Seth
    March 23, 2013 at 6:53 pm #

    Any chance that you’ll share the techniques in further depth with the Unity community when you are done?

  15. david findley
    March 24, 2013 at 12:50 am #

    =p

    so, considering that you’re going to be a multimillionaire … well, how does it feel? Do you regret that you could have done this ten years ago? ;O) Can you believe that it started with a campaign for donations..?

    Are you planning to retire? Or do you think that you would enjoy continuing to milk the franchise? (you’d have to get a new art director, if you did. The streets are just too clean, the characters dangerously world-of-warcraft-ish. It’s just not good enough.)

    Whats the competition looking like in the future of cyberpunk?

    If you’re going to succeed, it might best be as a niche with an emphasis on text, contra the graphics monsters and the direction they’ve been taking RPG’s.

    If you go this way, you’ll be hiring writers in place of computer graphic designers, right?

    Are you accepting applications for writers? can I apply formally via resume? I think that for a modest salary, even part-time, I could contribute to a general effort for awesome story-line and plot.

  16. Robert Whitney
    March 24, 2013 at 6:48 am #

    Awesome!

    Love the “behind the scenes” look on the artwork, and am very fascinated to see how the editor will work in more detail.

    Been waiting for this game since it’s original rumors and the kickstarter program!!

    Look forward to playing it soon.

  17. tilly
    March 24, 2013 at 1:18 pm #

    Very cool! :) And interesting to hear about how graphics are presented (e.g. increasing contrast on characters).

    Definitely have a greater appreciation for what you guys have done here. :D

  18. CanRay
    March 24, 2013 at 2:05 pm #

    Love the combat-ready A-Team van from some other ‘runner group!

  19. Ginsu23
    March 25, 2013 at 4:04 am #

    Sounds like you guys put a lot of thought into character design. Is that iso read thing why the trolls have massive upper-bodies but tiny legs? It makes sense now. I’m hoping to get into designing characters for video games, so the more of this kind of stuff I read the better. Thanks guys.

  20. Tim Ridley
    March 26, 2013 at 2:31 pm #

    Great article! I’d love to see the painting process dev diary you alluded to. I Loved shadowrun on SNES and you guys are doing it great justice from what I’ve seen so far!

  21. Huscurian
    March 26, 2013 at 7:43 pm #

    I like how the editor is fleshed out. The painting/meshing/character designing guide should be come with as a package for the game! Why not include it in the basic or deluxe pre-order? :P

    Man, I am glad this game is coming along nicely.

  22. Suminsky
    March 28, 2013 at 6:01 am #

    I want know about z sorting issues with the iso map, if the map is 2D, the z/depth buffer is not filled “correctly”, so how the 3D characters interacts with it? Since you mentioned using cubes shapes for the lights, do you use it also for z buffering? Or something like that? Id LOVE for details on that one..Maybe you have some sort of layering(always above/bellow player )..Im a die hard fan of 2D isometric.

  23. Case
    March 29, 2013 at 5:44 pm #

    I deeply regret not having trusted you guys during your kickstarter campaing! I’m sorry!!!!

    I don’t know if you already answered such question, but will you give us freedom to explore the whole setting of the game wihtout being restricted by story progression, or will Seattle be just a big dungeon were we need to go from point A to point B to advance the plot and unlock the next area?

    I apologize for all the errors i’ve probably made in this post, i’m still learning english

  24. Nagumo
    March 30, 2013 at 12:10 pm #

    Nice Backroundinformation…thx…

    Can’t wait to play my first payed Kickstarter Game :) You Guys make a dream come true, because i have said the last years several times that a remake of the Shadowrun Game from the Super NES would be so awesome –> And suddenly i found your page :)

  25. Quizmaster
    March 31, 2013 at 10:43 am #

    I, too, was sceptical at first, when the first drafts came out, but you really convinced me. I even raised the backer level, and I don’t regret one second of the 5 hours I spent taking soil samples in snow and rain to earn the money I sent you.

    Will it be possible to import stuff, like grafitti?

  26. rosco
    April 1, 2013 at 9:18 am #

    baby, you spoil me

  27. Bombzero
    April 6, 2013 at 8:50 pm #

    Looks like you guys are doing an amazing job of bringing SR to a new era of PC gaming.

  28. Daniel
    April 10, 2013 at 6:36 pm #

    Please add more environmental effects such as particles, light beams, wind, NPCs with errands, to make the world more alive!