Archive | March, 2013

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.

Shadowrun Returns First Look

Okay, the wait is over! Here’s what we’ve been up to for the last nine or ten months.

The Harebrained team is pleased to bring you this alpha gameplay walkthrough video for Shadowrun Returns narrated by Jordan and Mitch. While no Bothans died to bring you this information, it’s been a wild ride to get to this point and there’s still plenty to do. But let’s not talk about the future for a moment. Let’s just take 20 minutes or so to relax and see the game in action.

Since our story is about secrets and lies, we decided that our video should walk you through a side-mission so you can get a clear sense of how the game is played without revealing any spoilers. In this mission, you’ve accepted a job from a reliable Fixer (who’s totally fronting for Aztechnology) to locate a rival corporate test lab and terminate the test (with extreme prejudice).

Remember as you watch the video that all the environments, conversations, and tactical situations you see were created using the Shadowrun Returns Editor – the same editor that will ship with the game on OSX and Windows. For us, re-energizing Shadowrun doesn’t just mean making a game for you to play and enjoy (although that sounds GREAT). It means creating a set of tools for YOU to experiment with, express yourself with, and share.

We imagine that you’ll have plenty of questions and comments about what you see and we encourage you to go to shadowrun.com and join the community here . We’re on regularly, answering questions and clarifying stuff. It’s a friendly place. Try it!

And one more thing – If you like what you see, please share the video and screenshots and ask your friends to share them too!

Thanks,
HBS

=============================

For those interested in additional details, here are some specific notes on the video. Hopefully, they’ll provide more insight and answer some of your questions in advance.

00:20 - Lady Z prefers to dress-for-effect (dig that gas-mask – so punk) but there will be a variety of outfits for you to choose from so you can make your character look the way you want. We plan to release more outfits after the game launches.

00:39 - For those of you who know Seattle, this is Pike Place Public Market in 2054. The neighborhood may have taken a downturn.

03:30 - options: Burst Fire, Full Auto etc. We also have character combat abilities like Aim. We also use the tabletop “stages” of damage with from Weak (1/2) to Crit (x2). All of this is based on the math from the SR tabletop game. You can see your chance to hit with every character but you need to invest Karma in weapon specializations to see your chance to crit with each weapon type. As your weapon specialization skill increases, so does your chance to crit.

05:00 - Note that Lady Z’s corp security etiquette skill is missing from her character sheet. The screen underwent a recent revision and it was left off of this version temporarily. Also, Scooter the Rigger’s drone skills are currently higher than his Intelligence and the Shaman’s spirit control and conjuring skills are higher than his Charisma. Not to worry. These bugs are already addressed.

06:00 - Obviously, Lady Z could just whip out an Ares Predator and drill this guard but guns make a lot of noise and Jordan doesn’t want to attract too much attention – our AI NPCs will react to gunfire and investigate. So instead, he whips out Lady Z’s katana for a (relatively) silent kill. One other note – you’ll see that the guard asks Lady Z for her SIN. Just want to make it clear that there’s no “SIN system” in the game and runners are SINless. But fake credentials are very useful in getting past guards, etc.

06:10 - You’ll notice the rigger is automatically being followed by his drone. If you check the rigger UI at the bottom of the screen, you’ll see that you can set the drone to remain stationary. That’s handy if you want to leave the drone behind to provide line-of-sight on a location after you leave (so there are no surprises when you get back).

08:08 - Inside the shaman’s backpack are magical fetishes that he uses for summoning elementals: air, fire, water, and earth. Fetishes are consumable to keep the shaman from being overpowered. They can be replenished by purchasing more at the local talismonger.

08:22 - Every turn, summoned spirits have a chance to break free and that chance increases every time you commit APs for them to use. However, increasing your Spirit Control skill reduces the risk. It’s a good investment because when a spirit breaks free, they’ll attack anybody.

09:37 - Yup, the AI loves it when you clump up your characters. If they have an equipped grenade or area-of-effect spell, this will happen to you too.

10:14 - Some spells have cool-down times associated with them and you SHOULD wait for that time to expire before using the spell again. However, you CAN use the spell again but you’ll take Drain HP damage from pushing yourself.

15:18 - Ley lines are the intersections of magical energy flowing through the world. Only Mages can see them. When they stand on a ley line, Mages cast spells far more easily and with greater effect: cool down times are reduced, and chances to hit are increased, as is damage.

16:17 - Shaman don’t always need to expend fetishes for summoning spirits. Intense concentrations of emotions or natural elements can be used as gateways for summoning as well. Only shaman can see them. Once a concentration has been used as a gateway, it can’t be used again (until the shaman raises his summoning skill high enough), so best to keep a magical fetish in your pocket.

17:27 - The AI re-evaluates their threat list every turn. The basilisk decided that the abomination spirit is the biggest threat in the room.

It’s On!

Hey Everyone!

As Jordan mentioned in his Developer’s Diary last Friday, we have some exciting stuff coming in the next couple of weeks and the team has been hard at work to deliver.

“What sort of exciting stuff”, you ask?

How about a look at Shadowrun Returns in action!!!

On Sunday, March 10th at South By Southwest in Austin, TX, Jordan and I will do a LIVE DEMO of Shadowrun Returns and take questions from the audience. Also in attendance will be our Guest of Honor, Erik Dahlman, one of our $10,000 Backers (and resident of Austin).

SXSW is another great opportunity to get some press for the game and help get the word out. But don’t worry, you won’t need to attend the show to see the game in action! We’re releasing a VIDEO WALKTHROUGH of Shadowrun Returns gameplay, narrated by Jordan and me, the Friday before the show. We’ll release our first set of REAL SCREENSHOTS, too.

And don’t forget, we’ll be at Seattle’s Emerald City Comic Con tomorrow, March 2, talking about the game, answering questions, and doing the dwarf dance as little as possible. We’ll be in the Gaming Room at 12pm. Hope you can join us!

To whet your appetite for all that, here are some characters you’ll see in action next week.

srr_troll_shaman

srr_elf_samurai

srr_jake_armitage

And here’s some concept art from the Seattle campaign.

srr_concept_docks

Seattle Docks

srr_concept_tenements

The Tenements

srr_concept_morgue

The Morgue

And finally, here’s a pic of the studio so you can see the team doing their thing.

photo (2)

Time to get back to work!

Mitch