Inside Animation: The Process

As I descend further into the depths of animation Hell, I thought it would be good to expose my animation process to the world. At this stage of the project, I’ve completed half of the cutscenes in the game. I’m able to tackle one cutscene every week. I have a good sense of the workflow and I’m getting “in-the-zone”, so I feel ready to talk about the steps I take to bring these scenes to life.

Long time readers of this blog (all three of you) may remember the first time I did this. Last year, when I was still animating the Demo, I wrote two articles about my process. Here are the links to that old article, parts one and two. Enough has changed since then that it warrants a new piece.

( NOTE: I won’t go into detail about how I animate the character’s faces, since last week’s blog was a deep dive into that system. Feel free to check that out. )

Now, how do we make the cutscenes in Where Shadows Slumber? To make this process more concrete, I’m going to focus on a relatively innocuous cutscene that I just got finished animating this week called Beach.

 

Cutscene-Writing.jpg

Step 1: Write A Story

You may not have expected this to be the first step on our journey, but it is! Writing is the most important step, by far. Before any work begins on a cutscene, Jack and I have to agree on the game’s story and how it will be told to the player during the game. This process took place a long time ago, at the beginning of 2017, when we locked ourselves in a room and did not emerge until the game’s narrative was pinned down.

Cutscene-Script-Beach

Before we named the character, “Grongus” served as a funny temporary name.

The original script was revised two times (officially) with some extra cuts happening unofficially in conversations between the two of us. Our original idea was to have a lot of cutscenes – I think 15 or 16 cutscenes in total – in the entire game. Since there are 8 Worlds, we wanted an intro cutscene to each World and a “finale” cutscene after the player completed all the cutscenes in that World. I agreed to this not only because I loved animation, but also because I vastly underestimated the scope of the work.

However, we eventually decided to eliminate a lot of the intro scenes. They weren’t really necessary, and it was jarring for players to watch two cutscenes in a row (a finale for one World, and an intro to the next) when they really wanted to get back to the gameplay. We only kept intro scenes for moments where the Player would be genuinely confused without them. The best example is the cutscene called Escape which takes place very early in the game. Prior to this cutscene, Obe is captured by human-like animals in a finale cutscene, and his Lantern is taken. In the very next Level, he’s freely walking around a volcanic prison with his Lantern in hand. Without a cutscene like Escape, players might wonder what happened to the animals, how the Lantern returned, and why Obe is not still in some kind of cell.

Cutscene-Script-River.JPG

Not only was this intro cut from the game, but this World’s puzzles don’t even operate the way we indicate in this script. This is why it’s good to leave cutscenes for the very end of the project!

Therefore, the Beach scene is a bit of a relic as far as cutscenes go. It’s one of just two intro cutscenes left in the game, taking place at the beginning of World 3, the Aqueduct. I felt it was important to show the transition between the River World and the Aqueduct World because they are quite different, and the River finale doesn’t hint at the Aqueduct in the slightest bit.

Here’s the short version: The scripting process is important, because if we can’t agree on whether or not a cutscene should be in the game, I can’t go forward and spend 40 hours creating it!

 

Cutscene-Sketch-Header.jpg

Step 2: Sketch the Scene

Execution begins with sketching the scene on pen and paper. There is a long gap between the writing process and the actual execution of the cutscene. For reference, I began this cutscene 1 week ago on May 22nd 2018, but the story was written in January of 2017. That’s over a year! As I mentioned above, one reason for this is because puzzles are more important to the game than cutscenes are. Puzzles get top priority! Also, since edits to the script happen sporadically as the game evolves and our scope shrinks, it’s good to sit on the script for a while. That’s why I’m doing cutscenes last.

There’s one more good reason, though! Since cutscenes happen after the game’s art has been completed, the sketching process is a lot easier. Most of the game’s artwork is done using a modular set of puzzle-piece 3D models that can be arranged along a grid to form pathways, bridges and obstacles. I’ve also created a bunch of materials for each World. That means when it’s time to lay out how a cutscene is going to look, I have a wealth of building blocks to work with. Really, all I need to do is draw a few pictures to determine the camera’s position, and I’m good to go.

Cutscene-Sketch

When I sketch a scene, I’m trying to make it look just like the puzzles. My goal for cutscenes is that you never even feel like you’ve left the game. The camera is in the same position and rarely moves, just like the game. I use the same models, colors, camera effects, and even some ambient audio, to keep that feeling of similarity. So when I draw a picture of the scene, I’m trying to get everything in one shot. I need it to work in portrait mode on an iPhone, with room for superfluous art on the sides that only iPad users can see.

That’s why for Beach I composed the scene with the outlet pipe near the top of the scene. I know Obe is going to wake up, walk to it, and climb in. Arranging the scene this way avoids a messy camera transition, and lets us focus on the stillness of the moment.

With a good picture to work from, we’re ready to set things up in Unity 3D.

 

 

BurnedLaptop

 

Step 3: The Unity Smoke Test

You were probably expecting Step 3 to be “model everything in the scene” or “begin animation” – but I don’t dive into that right away. I’ve gotten into the habit of doing a smoke test whenever possible, before beginning a large amount of work. This is an old phrase from computer programming that refers to plugging in a machine and seeing if it starts to smoke, or light on fire. It’s also known as a sanity test.

As the picture above indicates, the modern version of a smoke test is when I douse my computer in gasoline, light it on fire, change my name and move to Mexico. (Wait, that’s not a smoke test. That’s Operation: Secret Grongus. Whoops! Jack, please remind me to delete this paragraph before I hit Publish)

The modern version of a smoke test is when you intentionally do placeholder work just so you can test it and see if something is going to function correctly. After all, if it doesn’t work now, it won’t magically work later. It’s especially important when making a transition from one tool (3DSMax) to another (Unity). The game’s cutscenes will be animated in 3DSMax, but they’ll be viewed by the player in a build of the game generated by Unity. We need to make sure that pipeline works before we dedicate 40 hours of work to something.

First, I create a scene in 3DSMax to work with. I import (3DSMax calls it “merging”) Obe’s character model, and the models of any other characters that are in the cutscene, into the file. I also merge in a few models that I know I will need. For example, in Beach, I know I need to use my ladder pieces so Obe can climb into the pipe.

Cutscene-SmokeTest.JPG

Will Obe, his Lantern, and my modular ladder make it into Unity properly?

I give Obe some basic placeholder animations. Really, it’s just a few frames that will all be deleted later. I make Obe wave his hands, move in a T-pose, do jumping jacks, or something silly. My goal is to make sure the animations are properly translating over to Unity. I do a similar process for objects in the scene and other characters. Obe is animated separately from them because I’m using the same Unity prefab that is used in the real game. This adds another step, but it’s worth it in case there are crucial last-minute changes to his prefab. Along with that, there’s a lot of little things to do – Animation Controllers for each FBX file, setup in the scene, camera positioning, light adjustments, and much more. Anything could go wrong, so I’d rather find out before I’ve done a few grueling hours of animation.

Cutscene-SmokeTest-2.JPG

Every cutscene needs its own Unity scene, FBX files for Obe and the rest of the cutscene, and Animation Controllers for Obe and the rest of the cutscene.

I have a small checklist of things I go down:

  • Can I animate Obe?
  • Can I animate his Lantern separately from him?
  • Can I animate his Lantern if he’s holding it and it follows his hand?
  • Are Obe’s hands, feet, and pelvis “Linked to World”?
  • Can I animate other characters?
  • Can I animate other characters holding objects?
  • Can I animate objects on their own?
  • Do other characters require their body parts to be “Linked to World”?
  • Is there a light? Is that light attached to the Lantern?
  • Is the Lantern flickering properly?
  • Does the camera need to be re-positioned, or zoomed in?

When I’m confident that Obe’s animations and the animations of everything else in the cutscene are working well, I can begin modeling the scene in earnest. Now I’ve made sure there won’t be any surprises during the next step.

 

Cutscene-Model-3DSMax.JPG

Step 4: Model Static Objects

We’re ready to bring my ink sketch to life by creating the scene in 3DSMax. This is done by using modular building blocks wherever possible, and also creating new 3D models. Beach is a bit of a hybrid in this regard. The ladder, for example, is the same model and material used throughout the game whenever Obe climbs a ladder during a puzzle. The water is the same rig we use during Levels, albeit with a special material. But other specific objects, like the sandy beach, the wall, and the outlet pipe are unique to this scene. I gave up the strictly modular approach a little while ago, and I think the game is better for it. (Above, the scene in 3DSMax. Below, the same scene in Unity.)

Cutscene-Model-Unity

Now that the models are in place, and nothing is going to change, I can go forward with confidence. I place Obe in an initial pose that matches the terrain, and begin animating the scene by hand.

 

Cutscene-Animation.JPG

Step 5: Keyframe Animation

Recently, when I was at PAX East 2018, someone asked me if the cutscenes in our game were animated using motion capture technology. I took this as a compliment, because I think most people assume motion capture animations are an indicator of high quality. Thanks, random person!

For those unfamiliar with motion capture, think of the character Gollum in Peter Jackson’s Lord of the Rings trilogy. Gollum was animated in 3D, but not by hand – rather, the actor Andy Serkis dressed up in a silly motion capture suit and performed the role himself. Later, computer imagery was placed on top of the scene using data captured from his performance. This technology has also been used to great effect in the Uncharted series of games. As it grows in popularity, there are boundless examples to use. I can’t name them all!

However, that is not how animations are created for Where Shadows Slumber.

Motion capture is the proper tool to use when your resulting animation is intended to be life-like, gritty, and serious. Characters like Joel and Ellie from The Last of Us work well because they are intended to be portraits of real people, so it makes sense to have actors play them. Motion capture also requires a financial investment that only AAA studios can afford. If you’re using motion capture, that means you’re paying actors some money, purchasing a large studio room to perform in, purchasing high-speed cameras, and purchasing (or creating) software to bring it from the stage into the virtual world. We don’t have the resources to afford that, and I don’t want to work that way anyway!

Cutscene-Animation-Frames.png

By setting key frames at 600 (Obe takes a step) and 605 (Obe slips a bit in the uneven sand) the trivial frames between (601, 602, 603, 604) are filled in by the computer program.

Animation for Where Shadows Slumber is done the old fashioned way – by mouse-and-click keyframe setting. I’m fairly certain Pixar does this as well, albeit with more complex tools than the 3DSMax Animation Timeline. If you’ve ever seen a documentary on how Walt Disney created those first frames of Mickey Mouse by hand on cell sheets, you get the idea – the lead animator sets a pose for one period of time, and then sets a different pose for a different period of time. His subordinates fill in the gaps, and the result is the illusion of animation.

I don’t have any subordinates, so 3DSMax fills in the gaps for me. Sometimes I work with it, and sometimes I have to fight it because it filled in the gaps wrong. You need a lot of key-frames, but animation frames are just a fraction of a second ( 1/30th a second, in our game ). That means an hour of work may get you just 3 quick seconds of animation. The process is painstaking, and easily takes the longest amount of time in the cutscene creation process. Beach, a relatively simple 50 second cutscene, required 7.5 hours of animation to complete. The previous cutscene, Wolf, which is a very involved fight scene that lasts 100 seconds, required 48.5 hours of animation!

 

Cutscene-Footprints

Step 6: Special Effects

We’re not even close to done yet. Animating the characters in a scene is not enough to bring it to life! Every cutscene needs some kind of special effects, whether it’s footprints in the sand or the drip-drip-drip of a leaky pipe. This never takes as long as actual animation, but it can still be a painstaking process. For example, in the Wolf scene I mentioned above, every time an object fell into the water I had to trigger a particle burst to make it seem like the objects were splashing. That was as fun as it sounds!

To achieve my special effects, I wrote a script called Cutscene Manager. This thing will fire off effects based on the time of the animation, and I save it only for things I can’t animate by hand. Here’s two examples to show you the difference:

Example 1: Footprints in the sand

These footprints can be animated by hand, so I don’t need to use my script. Notice how they appear after Obe touches his feet to the ground – what’s happening here? Well, they are actually just hiding under the sand! I triggered their animations using keyframes, just like anything else in the scene. Above, you can see one that I have selected that is still burrowed under the ground, waiting to rise up.

Example 2: Obe’s Lantern light grows, and then shrinks

We use the solid color black a lot in this game. It represents total darkness, which makes it handy for scene transitions. Every Level and cutscene begins with the world in total darkness, and then a light grows somewhere and the animation begins. I think this helps focus the attention of the player, and it makes transitions less jarring. However, since Lights are a Unity component, their Range values can’t be animated in 3DS Max. 3DS Max has no idea they even exist! Instead, my Cutscene Manager script knows to change the Range of a specific Light at a specific speed at a specific point in the animation. It may seem like a crude solution, but it’s the best we came up with. At the end of the scene, the Light gets another trigger to shrink down to zero – pitch black.

You can see why special effects necessarily need to come after principal animation. So many of these things require specific timing! If the underlying animation changes, they’d have to change, too. It’s better just to wait.

 

Step 7: Recording for Alba and Noah

Recording the cutscene is my final step, although the cutscene is not done yet. Using OBS, I record my screen with the animation playing. I mute the sound in the game, and I talk during the cutscene to tell our audio engineers what is happening. Some things are obvious, and I don’t need to say them (e.g. he’s walking in sand, which sounds like the sound of someone walking in sand). Other times, a noise comes from off-screen and has no visual representation. Without my direction, Alba and Noah couldn’t possibly guess at what is happening in the scene. My recording is set to be the exact same time-frame that it will be in the game, which means they can “score” this video as if it was a short film. From the work they’ve done so far on earlier cutscenes, I can tell the cutscene audio is going to be incredible.

I briefly flirted with the idea of using a high-quality recording of the cutscene in the game, instead of having people view the cutscenes in real-time. However, I don’t trust Unity’s ability to play videos across multiple iOS devices and countless Android platforms. I also wanted to avoid including 10 large MP4 files into the game’s databanks, for fear it would clog up the game. The last reason is that our final cutscene transitions seamlessly into the credits, which need to be translated into multiple languages. This would result in 15 different movie files! I prefer to have that done on the fly using Jack’s JSON file setup.

Once Alba and Noah score the cutscene, I’ll put that file into the game and the audio will play in-sync with the animation, all in real time! Players can pause the cutscene from a top menu, go to the level select screen, skip the cutscene, or resume the animation seamlessly.

 

 


 

I don’t exactly know how Alba and Noah score these cutscenes, so I’ll leave that for another blog post. I invite them to share their knowledge with you, dear readers, whenever they feel the desire to do so. (Maybe I’ll interview them about it?)

That’s all for now. I need to go back to the animation mines and make more cutscenes… I’ll see you back here next Tuesday for the June State of the Art. Don’t miss it!

 

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

We hope you enjoyed this look at the cutscene animation process. You can find out more about our game at WhereShadowsSlumber.com, ask us on Twitter (@GameRevenant), Facebookitch.io, or Twitch, and feel free to email us directly at contact@GameRevenant.com.

Frank DiCola is the founder of Game Revenant and the artist for Where Shadows Slumber.

Inside Animation: Face Morphing

When I was showing off Where Shadows Slumber earlier this year at MAGFest 2018, one of my fellow game developers gave me a stellar compliment. As he watched the game’s second cutscene, he said “these animations are so evocative.” What he meant was that the animation was conveying a large amount of emotional detail even though the characters never speak a word. This is especially impressive considering the cutscenes don’t even have sound effects yet!

Sometimes, we only remember the one negative comment we get in a sea of compliments. But for once, a positive remark stuck with me. Evocative. If there’s one thing I can do as the animator for this game, it is to ensure that the player feels a range of emotions when they watch the game’s story unfold. But how can this be accomplished when our character is so small on the screen? More practically, how is this actually achieved using a 3D modeling studio and the Unity 3D engine?

This blog post is a quick glimpse at how I set up the facial animation rigs for the characters in Where Shadows Slumber.

 

3Ds

First: The Old and Stupid Way

Before I show you how I animate the faces in the current build of the game, I should show you the first way I tried it back when we were creating a Demo of the game. The old Obe model, shown above, had a perfect sphere for a head. In the image above, it’s grey. Then, I put in two snowman eyeballs as flat discs (they look teal in the image above) and a mouth plane that wrapped around his ball-head (obscured above). So far, so bad – nothing can be animated here! These objects are static. His face won’t look evocative at all.

My answer was to create little patches of skin that could be moved around to simulate facial animation. Though they look peach in this image above, they would blend in 100% with his skin tone thanks to Jack’s shader. My philosophy was simple – if the skin slabs were out of the way, his eyes were open. If they blocked his eyes partially, that was a facial expression. In the image above, near the bottom-right, you can see that Obe’s unsuspecting opponent has his skin slabs set to angry because they partially block his eyes in a slanted direction. By moving the slabs around in time with the animation, facial expressions were simulated.

This was supposed to be a “quick and dirty” way of doing facial animation, but it ended up being a “takes forever and looks terrible” way of doing facial animation. I’ll never return to an amateur system like this! The silliest part is that 3DS Max has a system perfectly set up for preset facial animations called Morpher.

 

HeadAnimations

The Morpher Method

By spending more time modeling Obe’s head, I was able to create a flexible skull with some textures mapped onto it (black for features, white for skin) and preset animations with Morpher. This skull can be tuned to different emotions, and even combinations of emotions. Above, you can see how Obe can express a range of poses: angry, devastated, confused, joyous, blissful. Now that you’ve seen the final product above, here’s how to set up your own:

Morph-Base

Step 1: Model the base head

Spend some time crafting a base head for your character. Note that you’ll be unable to edit it once you begin Morphing, so take your time. Create flexible eyes, a mouth, a nose and ears (if your character has those) and be sure to add enough loops so they can move around later without looking jagged. This time, I gave Obe detached cartoon eyebrows so I could be more ambitious with his facial expressions.

Morph-Poses.JPG

Step 2: Duplicate the head as a Copy (not an Instance) and pose it

Now you must copy the base head and move it somewhere else in the scene. (I like to make a Game of Thrones style wall of faces.) Edit the vertices on this model into an extreme pose, such as furious anger or deep sadness. This pose will be what “100%” of this emotion looks like. Note that the vertices from the base head are going to move (morph, if you prefer) into the new positions you give them here, as well as every point in-between. Pay close attention to the topology of your model when you choose new positions for these verts, and your animations will look smooth. Above, you can see I do mouth poses and eye poses separately, so a wide open mouth (agape) can exist separately or simultaneously with wide open eyes and raised eyebrows (shock).

Morph-Combo

Step 3: Connect your pose to the base head in the Morpher modifier

The base head will have the Morpher modifier on it. None of the others need it. From the base head, you can use Pick Object From Scene to slot in certain poses as animation sliders. Then, using the arrows shown next to the poses, you can “morph” these targets from 0 to 100. 0 is going to look like your base head – 100 is going to look like 100% of the pose. If you combine two poses, as I did above, you may get weird results. But in this case, shocked eyes and a mouth agape work well together.

Morph-Gallery.JPG

Step 4: Repeat Steps 2 and 3 for every face pose you’ll need for this character

I made separate poses for Obe’s mouth (left of center) and his eyes (right of center). The yellow shape in the center is his base head. I tried to do every emotion I’d need, as well as building blocks like “shut R” for the right eye being closed. One thing I didn’t need to do is detailed mouth animation for talking, since he never says anything in a real human language. He just wails in terror a lot. But if you were doing this for a regular animated film, you’d want a whole set of mouth animations for the various sounds we make with our mouths (Chuh! Puh! Quah! Teh!) I’m happy I didn’t need that, because I hate doing those.

Morph-Swag.JPG

Step 5: Animate in a Scene when it’s all ready

This massive setup time bears fruit once you begin animating. Having a flexible facial animation system is remarkable. I love this system so much, and I never have to worry about whether Obe is expressing the emotion I want. Everything is correct and his face is super easy to read, even at a distance. Here, he’s giving an “…OK” kind of look as he escapes prison early in the game’s story. Though this look is not programmed in directly, it’s a combination of four Morph Targets: left eye closed, right eye closed, mouth closed, and “serious.” That’s the beauty of working with Morpher!

 

If you’re building your own facial animation system, be warned that it’s a lot of work. However, it will pay off in the end. Good luck making your animations evocative! Feel free to ask me any questions in the comments, over email, or on Twitter. I’m always eager to help. Happy blending, everyone!

 

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

We hope you enjoyed this technical look at the systems behind the game’s artwork. You can find out more about our game at WhereShadowsSlumber.com, ask us on Twitter (@GameRevenant), Facebookitch.io, or Twitch, and feel free to email us directly at contact@GameRevenant.com.

Frank DiCola is the founder of Game Revenant and the artist for Where Shadows Slumber.

State of the Art – May 2018

Welcome to State Of The Art, May 2018 edition! This monthly progress report is written by Frank DiCola and is focused entirely on how the game’s visuals have improved in the past month.

It’s hard to believe the past month was just 30 days – everything feels so long ago, from our hilarious April Fool’s Day post to my trip to PAX East. As we wrap up production on the game, I find we have more work to do, not less. Not what I expected, but Jack and I are up to the task!

Missed last month’s State of the Art? The April edition is right here.

 

 

 


SPOILER WARNING: This post contains screenshots, GIFs and videos of later sections of the game. If you want to experience them in all their majesty for the first time on your mobile device when the game launches, don’t read on!


 

 

 

 

LevelSelect-5-6.gif

More Gorgeous Menus

The GIF above is a little teaser of what I have for you in this update: two more Worlds have been polished and are now App-Store-ready. As I hinted at last time, I completed World 5 (the Hills) and World 6 (the Summit). Check out their Level Select menus! I know it seems weird to show these off, but I always love how they come out. It’s so cool for me to get an opportunity to visualize the game world from a different perspective. This 2D view allows you to appreciate the scale of Obe’s journey as he climbs to the top of a massive mountain towards the game’s end.

 

SOTA-April-Hills

The Rainswept Hills

These two Worlds posed a unique challenge to me because they take place in the wilderness. Up until this point, I tried to stick with my modular tool-set for as much of the game’s artwork as possible. However, sometimes you just can’t do that. When it comes to mountains, valleys, and rocks, they demand a jagged unevenness that just can’t be achieved by cookie-cutter pieces. Every Level in this World has a custom ridge that is 100% unique!

Jack will kill me if I show off every Level in this World, so I’ll have to settle for my two favorites. Level 5-2 has always looked great, but now that it’s raining like hell the Level has really come to life:

Then, towards the end of the Hills, we transition to a snowier climate. Obe is getting to the top of the mountain. He sees a cottage at the edge of the cemetery where he can rest for the night. Here is the last Level in this World:

I love doing weather effects because they really challenge me to think of how every tiny thing in the scene ought to change. Leave a comment and let me know what you think of “the Hills!”

 

SOTA-April-Header

The Forgotten Castle at the Summit

Obe is making his way through a blizzard to a lonely, abandoned castle at the top of the mountain. Once again, I got the opportunity to polish the weather effects here and I think they look incredible. I can’t show off everything, so here’s a quick look at two different Levels.

The first is Level 6-1, “Pass.” Obe is making his way through the snow as he attempts to cross this old bridge. Thanks to Jack’s terrain setup, Obe will actually use different animations depending on what terrain he is standing on. Notice how he interacts differently with Buttons and bridges.

In the shadows, another kingdom is revealed. Are we looking into an alternate dimension? Perhaps the shadows are a window to the past? The future?

Level 6-4 takes place inside the castle. Now, a snowstorm rages outside as a lonely sentry patrols the entrance.

This World does some amazing things with shadows, so I don’t want to give too much of it away. It looks a million times better than where I left off a few months ago, so I appreciate the chance to come back and punch it up.

 

SOTA-April-Cutscene.JPG

Next Up: Cutscenes, Cutscenes, Cutscenes

Rather than move on to the final World of the game, I’m going to take the next few weeks to animate the game’s remaining story cutscenes. World 7 needs a bit of love right now, so Jack is going to spruce it up a bit before I make my glorious return to polish. Cutscenes are tough because every minute of animation is roughly 40 hours of work ( ! ) so I’m going to be nerding out in my room for a few more months, it seems. Two of the cutscenes have been animated and shown off at festivals, but they need sound. The other eight have not been started, although their scripts were written long ago.

At some point I may enlist Alba and Noah to help me input the sounds into the animation, because I think we can cover more ground that way. But as far as character animation goes, it’s just me and the keyframes. Some people at PAX East asked me if I ever use motion-capture for these short films. The answer is: No way! We don’t have a crazy setup like that at Game Revenant (read: at my apartment or Jack’s apartment). It’s all animated by hand, baby.

Wish me luck as I make my descent into animation hell. See you next month!

 

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

We hope you enjoyed this update about the game’s artwork. Have a question about aesthetics that wasn’t mentioned here? You can find out more about our game at WhereShadowsSlumber.com, ask us on Twitter (@GameRevenant), Facebookitch.io, or Twitch, and feel free to email us directly at contact@GameRevenant.com.

Frank DiCola is the founder of Game Revenant and the artist for Where Shadows Slumber.

State of the Art – April 2018

Welcome to State Of The Art, April 2018 edition! This monthly progress report is written by Frank DiCola and is focused entirely on how the game’s visuals have improved in the past month.

Missed last month’s State of the Art? The March edition is right here.

Also, don’t be fooled by our last blog post. The “Easter edition” of our blog was actually just the Where Shadows Slumber April Fool’s gag for the year. We hope it gave you a few laughs! Don’t worry, we aren’t adding any of that stuff to the game.

SOTA-Discord

Sorry Caroline – no skins!

We all had fun making that, but now it’s back to work. Here’s the State of the Art!

 

 


SPOILER WARNING: This post contains screenshots, GIFs and videos of later sections of the game. If you want to experience them in all their majesty for the first time on your mobile device when the game launches, don’t read on!


 

 

 

SOTA-Header.png

Mustard River

The infamous “mustard river” is now complete! These Levels used to be in real rough shape, but now I love the way our ashen rocks contrast with the yellow of the water. This World is home to Walkers, a mechanic we introduce in the first River Level. I won’t drone on too long, because I think these GIFs speak for themselves. Enjoy!

River1.gif

Level 2-1, “Docks”

River2.gif

Level 2-2, “Cage”

River3.gif

Level 2-3, “Guide”

River4.gif

Level 2-4, “Ebb”

River5.gif

Level 2-5, “Ferry”

There are new Walkers, too! For a long time, the denizens of the River were weird copies of Obe in scraggly shorts. As you may have noticed from the GIFs above, I gave them a bit more unique personal features, such as different hats or clothing. Overall, they probably still look too much like generic video game zombies. Regardless, I hope people will realize as they play the game that these Walkers are to be pitied, not feared.

 

SOTA-LevelSelectHeader.png

Check Out Our Snazzy Level Select Menu

I’m really proud of the Level Select menu that Jack and I have been working on together. Rather than just do a few buttons with numbers on them, we really went all out to create a beautiful experience that takes you through the story of the game as you choose what Level you’d like to play. Check them out in action!

LevelSelects.gif

When the full game is done, this menu will be the best place to track your progress. How many Levels have you completed? How many are left? Which ones would you like to return to, to show your friends? During gameplay however, the Player won’t be directed here too often, since Levels flow directly from one into the other.

 

 

 

SOTA-HomeStretch.png

Polish: The Home Stretch

I have begun the process of finishing the game’s final 15 Levels. These puzzles have been finished for a while, and they even have some “first draft” art. However, as I say all the time, my goal for each Level is to make it look like my favorite Level, and make the player say “oh wow, I love the look of this one.” That’s a delicate process that takes a lot of time – many, many hours spent per Level!

CemeteryRain

 

So right now I have just one of the final 15 to show you today, and you can see it above. This is in World 5, The Hills, and it’s called Cemetery. It features tombstones that turn into ghosts when you cover them in shadow. The theme of the World is putting these spirits to rest in their graves.

This Level is nearly complete – there are two tiny touches I’m dying to put in. First, I want to give that Draggable pillar a bit more personality. Right now it’s just a green hyperrectangle (Jack taught me that’s what a 3D rectangle is) but it should feel like it belongs more. Second, I want to add animated blades of grass that bounce and bob along with the rhythm of the falling rain. Personally, I think making convincing rain is more about the effect the raindrops have on the ground rather than seeing actual particles in midair. When it rains in real life, what’s easier to see: the rain in midair as it falls to Earth, or the water collecting in puddles on the ground or forming little rivers? Observe the world around you next time there’s a storm. I’m right!

Anyway, those changes all take a lot of love so I’ll be poring over it more this week before I head off to PAX East!

 

SOTA-iPhoneX

Last But Not Least – The iPhone X!

I finally bit the bullet and purchased the iPhone X so we can test how the game works on its sleeker, thinner, taller (!) screen. The phone is beautiful and feels great, and you can see a proof of life photo above. Jack will probably have to do some programmer-fu to make the camera zoom out a bit on these phones, but that’s fine. I love playing on the iPhone X because of how smooth it is, so a little camera troubles are no problem at all!

That’s about it for this month’s art update. I wish I could have gotten a bit more done, but we had to attend SXSW earlier this month and I spent a lot of time preparing the art for that build. It was a great show, but travel always takes time away from being in the “flow” of creating artwork. Since I’ll be at PAX East this weekend, you can expect the same lame excuse next time!

We’re nearing the final days of working on Where Shadows Slumberwhich is a really weird thing to think about. I suppose we’ll still be doing a lot of post-launch stuff, but I’m not sure what I’ll do all day, every day once the game is done. Anyway, I know what I’ll be doing all day, every day in April… [ o_o] ART!

See you next month for another update!

 

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

We hope you enjoyed this update about the game’s artwork. Have a question about aesthetics that wasn’t mentioned here? You can find out more about our game at WhereShadowsSlumber.com, ask us on Twitter (@GameRevenant), Facebookitch.io, or Twitch, and feel free to email us directly at contact@GameRevenant.com.

Frank DiCola is the founder of Game Revenant and the artist for Where Shadows Slumber.

State of the Art – March 2018

Welcome to State Of The Art, March 2018 edition! This monthly progress report is written by Frank DiCola and is focused entirely on how the game’s visuals have improved in the past month.

Missed last month’s State of the Art? The February edition is right here: click me!

SPOILER WARNING: This post contains screenshots, GIFs and videos of later sections of the game. If you want to experience them in all their majesty for the first time on your mobile device when the game launches, don’t read on!

 


 

 

3-1-Noria

A Whole New Aqueduct

Like the other unfinished Worlds in Where Shadows Slumber, the Aqueduct used to look pretty dumpy. It was passable, but the colors were lifeless and the geometry was too perfectly straight. There was nothing about it that made me love it. As the game’s artist, that’s a pretty bad feeling. I never want any section of the game to make me recoil in disgust. My goal, as I’ve said before, is to make every Level my favorite Level. When it comes time to add screenshots of this game to the App Store, I should think to myself: “How can I possibly choose!? All thirty-eight Levels are so perfect and photogenic!”

If you read last week’s piece, titled Creating a Level: From Concept to Finished Product, the GIF above will look familiar. I chronicled the entire development of this Level (called Noria), from the time it was just a pencil sketch in Jack’s notebook all the way to our finished awesome Level. Here’s a look at the rest of the Levels in World 3, the Aqueduct.

 

 

 

3-2-Tradeoff.gif

Level 3-2, “Tradeoff”

3-3-Anchor.gif

Level 3-3, “Anchor”

3-4-Torus.gif

Level 3-4, “Torus”

3-5-Island.gif

Level 3-5, “Island”

I won’t return to the Aqueduct before launching the game, but if you really have a critique that’s valid and you absolutely must make your voice heard, comment below this post and I will read it! Who knows – you may change how the final game comes out!

 

Card_City.png

The Dust Storm Is Here!

They say you should never have a favorite child, and I think that’s probably good life advice. But I think I do have a favorite World, and it’s the City. I really wanted to include something like this in the game, and I put a lot of love into these Levels. It’s a crazy World where we go through a ton of locales in just five Levels, from the “bad part of town”, to a military tower, to a luxurious palace. And this is all during a sandstorm!

4-1-Slum.gif

Level 4-1, “Slum”

4-2-Alley.gif

Level 4-2, “Alley”

4-3-Tower.gif

Level 4-3, “Tower”

4-4-Fountain.gif

Level 4-4, “Fountain”

4-5-Labyrinth.gif

Level 4-5, “Labyrinth”

What do you think of these Levels? We are bringing these Levels to SXSW, so your advice is more than welcome! Slam that comment section with your sweet, sweet critiques. I need them to survive o_o

 

River Header.gif

Hell Revisited

I’ve just begun polishing World 2, the River. We aren’t bringing this one to SXSW next week, so I won’t get a chance to keep working on it for a little while. But so far I think it’s really cool! It needed a modest redesign in order to make the aesthetic work and I believe I finally nailed it.

The biggest change is that the ugly Lincoln Log wall setup I had is now going away. I was never really in love with it to begin with. There was something too neat and orderly about it. This is a swampy river that leads right back to the hell-jail you just escaped from! It should feel gross, a bit disordered, and disorderly. To achieve that, I’m working with a toolkit of gnarly trees, rickety boardwalks, and custom ashen rocks.

screen_1460x1948_2018-03-05_17-03-44.png

Here’s a sneak peek! What do you think… too much vignette, or not enough?

Still to do: redesign the Walkers to look like swamp denizens, add more motion to the clutter and plant life, and finish the remaining four River Levels. Expect that and more next time, in the April edition of State of the Art.

Thanks for reading!

 

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

We hope you enjoyed this update about the game’s artwork. Have a question about aesthetics that wasn’t mentioned here? You can find out more about our game at WhereShadowsSlumber.com, ask us on Twitter (@GameRevenant), Facebookitch.io, or Twitch, and feel free to email us directly at contact@GameRevenant.com.

Frank DiCola is the founder of Game Revenant and the artist for Where Shadows Slumber.

Creating a Level: From Concept to Finished Product

For a long time, I’ve wanted to write a post about how we make Levels when working on Where Shadows Slumber. The only problem was a lack of documentation. I forgot to take screenshots of the early stages of the Levels we’ve completed so far. What I really wanted to do was show our audience the growth of a Level, from it’s earliest conception and then show the various stages of the design process along the way.

When I thought of this idea, I tabled the blog and decided to wait until I started on a new batch of Levels… and here we are! We’re going to take an inside look at Level 3-1, Noria, the first Level of the Aqueduct World.

 

Maker:S,Date:2017-8-17,Ver:6,Lens:Kan03,Act:Lar02,E:Y

Step 1: Draw The Level

Every Level has a reason for being in the game. Noria is the first Level in the Aqueduct World, which makes it extra special. Whenever we design the first Level of a World, we like to communicate to the Player:

  • Why the World is going to feel different from the other Worlds in the game
  • What mechanics you’ll be dealing with in this World – especially new ideas

For the Aqueduct, we wanted to make it all about mechanical devices, switches, rotating things and whirring machines. Our game doesn’t exactly have a precise historical setting, but it’s fair to say it isn’t modern day. This gives us some leeway with technology. It has to work, but it can look really old.

MVIMG_20171025_141620.jpg

Jack’s notebook!

The Aqueduct World is all about Buttons. Buttons are Nodes that do something when you step onto them. There are all kinds of Buttons, but the most basic Button does a thing every time you step on it, no matter how many times you step on it.

To show that off, Jack designed a Level (above) where the only way to cast shadows and move the light was with a single Button. In addition to that, there are Buttons near each light in the Level to turn them on and off. The proximity of the light to the Button it’s attached to is an intuitive connection. These Buttons work like regular domestic light switches too, so it’s a cheap way of using existing Player knowledge about the real world and transmuting it into knowledge of our game.

When a Level exists in this form, the only thing we can really do is discuss it. Jack will attempt to guide a very confused Frank through the mechanics of the Level. I’ll try to poke holes in it (literally, with my pencil) and find problems with the design. We’ve never shown these sketches to testers because it’s too high-level for them to understand. If we like the idea of the Level, Jack makes a grey box prototype of it in Unity for us to test.

 

Noria-Greybox

This Level doesn’t look too special yet, huh? Just wait!

Step 2: Make A Grey-Box Prototype Level

With a design solidified, now we’re ready to make a version of the Level that can be played and tested. It doesn’t need to look pretty yet, so we use basic template cubes to represent walkable space. Affectionately called grey box prototypes, this technique is how we prototype every Level in the game. Watch a video of me beating the Level below:

As you can see, it’s playable in this stage, and everything works. You can solve the puzzle, which means testers can assess the strength of our design. (We just tell them to ignore the visuals.) We brought this Level, in this format, to AwesomeCon 2017 looking for feedback from players. When we show grey box prototypes to people, we want to make sure they can complete the puzzle. More than that, we want to make sure that they solved it on purpose instead of just by brute force. If we get good feedback, we proceed to Step 3.

 

Noria.png

Step 3: Draw Some Concept Art

This might seem backward, but this is the time when I draw a concept image of the Level. Why do I do this after the Level has been prototyped, and not before? It’s because Jack knows best which Nodes need to go where, and I don’t. I need to take cues from him about where everything must be, which often includes the actual length and width of shadow casting objects.

This is actually beneficial. It gives me good constraints to work with. I draw a paper sketch and say, “OK, if everything absolutely has to be in this location, what can I do with it? What makes sense for the setting [Aqueduct] whether it’s man-made or organic?” As you can see in the drawing, the following ideas have been spawned:

  • Obe should enter from a pipe (bottom right) to match the cutscene that plays directly before this Level.
  • The pillar now looks like it belongs – it’s a crumbling structural element of the Aqueduct, a man-made structure in disrepair.
  • The mechanism by which the lamp moves left to right is not just a magical back-and-forth switch. Now it’s a waterwheel! Why a wheel? Google “Noria”…
  • The lights need to look like actual man-made lights since they are powered by Buttons on the ground. Why not lamps?
  • There are stone pathways going horizontally that have crumbled over time. Those need to be repaired by shadows.
  • The bridges going vertically are metal grates that allow water to pass under them. This is an Aqueduct, we can’t just have standing water blocked in!
  • There’s a back wall with a door. I like to give the Player as many visual cues as possible that the finish line is an actual exit.

The concept art phase is another chance for us to critique the design. If we know the puzzle is good, but it produces an awkward-looking Level, we have the opportunity to reconfigure things. Perhaps the exit needs to be in a different place? Maybe objects should be closer or further apart? Now is the time to match the design to the intended context, the Aqueduct. Once I have good concept art to work from, I proceed to Step 4!

 

DesignBlog-Noria-FirstPass.png

Step 4: First Aesthetic Pass

Now it’s time to take that ugly grey box prototype (sorry Jack) and make it look and sound beautiful! I’m ready to apply my toolkit of Aqueduct paths, walls and bridges to the design. Once the art is laid down, Alba and Noah have their first chance to put some audio effects into the Level and set the mood. It makes a huge difference: now the Level doesn’t sound like it takes place in a silent death vacuum! Creepy chimes and rushing water converge to give the Level a sense of place. Here’s a video of it all in action:

The Level doesn’t look grey anymore! That’s awesome. But… it also doesn’t look finished, does it? This kind of art would pass for a student game or something in a game jam, but we want to be an App Store Editor’s Pick and win a ton of awards. That means the art needs to be worth the price people paid to download the game. It needs to be extraordinary! It needs to be… polished.

 

DesignBlog-Noria-Polished

Step 5: Aesthetic Polish

Polish is a game design term for taking your finished product and finishing it again so it’s even better – much like shining a shoe with shoe polish. You want to make your Level shine! If you’re making an island paradise, it needs to be the most relaxing paradise the player has ever experienced. If it’s a scummy slum in a city, you need to make that slum as dirty as possible. Everything needs to be pushed to the extreme.

My personal philosophy is that I want to turn every Level in the game into my favorite one. Obviously, I know that can’t happen. But at least while I’m working on it, I can take something boring and give it life. Speaking of which, this is usually where animation enters the picture.

animate (verb)

1530s, “to fill with boldness or courage,” from Latin animatus past participle of animare “give breath to,” also “to endow with a particular spirit, to give courage to, enliven,” from anima “life, breath”

Animation is the most time-consuming part of aesthetic design, and it requires a lot of setup as well. It makes sense for this to come last. But it’s definitely the most important artistic layer. Bad video games tend to feel frozen and stale: great games are always in motion, even when everything appears still. I think our modern brains are conditioned to assume that a screen containing no motion is frozen, as if the app crashed. If you look at games with a high level of polish (Blizzard’s Hearthstone comes to mind), there’s always something moving around to give the player the illusion of life. The goal of polish is to make your game appear to crackle with the spark of life. See for yourself:

Pretty different, huh? Our water shader adds some much needed liveliness to the water, and makes it feel like a rushing stream. Buttons now move and bounce under Obe’s weight. An animated glyph on the ground lets you know where you’ve just clicked. The lamp posts are now chains dangling from the ceiling, which lets them sway gently on a loop.

The other perk of animation is that it allows you to add a third sense to the game: touch (or, feel). In a very real sense, players can only experience your game using their eyes and ears. But if you do your job right as a game designer, certain elements in your game will make the player feel things. Have you ever gotten hit in a video game and exclaimed out loud “ow!” after seeing what happened to your avatar? You didn’t actually feel pain, but something about the experience was immersive enough that it made you connect with your character. That’s what polish is for. That’s how games rise to the top!

 

yellow-happy-smile-526968

forever and ever and ever and ever and ever and ever and ever

Step 6: You Never Finish, This Goes On Forever

Here’s the dirty little secret about my strategy for artistic polish: I’ll never be finished. I will never finish this game. I will work on this game every day until I am dead. It doesn’t even matter if I’m improving the artwork, even if I’m actively making everything worse I will never finish anything in this game.

Whoops! That’s not what I meant to say. Where was I?

Eventually, you need to stop working on a Level so you can move on. This is always a heartbreaking moment in game development. If I could choose any superpower, I would choose a very specific one – the ability to do things on my computer without time slipping through my fingers like grains of sand into an endless void.

[  . _ . ]

You have to move on so you can finish the rest of your game, so when do you do that? It’s at the point where your hours of input are only reaping very marginal gains. People won’t spend an eternity looking at your Levels, so you shouldn’t spend an eternity working on them either. If anything looks truly awful at launch, you can always sneakily patch in fixes that you missed. Just say you’re fixing bugs. and blame the programmer!

Besides, I can always improve the artwork again when we remaster Where Shadows Slumber for BlackBerry…

 


 

I’ve been working on this blog post for too long, and now my hours of writing input are reaping only marginal gains. Time to end this post. Thanks for looking at this inside scoop into our process! If you’re wondering why game development takes so long, imagine doing this for all 38 Levels in the game. That’s not even including the cutscenes…

Say, that gives me an idea for another blog post!

 

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

We hope you enjoyed this deep dive into our development process. You can find out more about our game at WhereShadowsSlumber.com, ask us on Twitter directly using the handle @GameRevenant, find us on Facebookitch.io, or Twitch, and feel free to email us directly at contact@GameRevenant.com.

Frank DiCola is the founder of Game Revenant and the artist for Where Shadows Slumber.

 

State of the Art – February 2018

Welcome to State Of The Art, February 2018 edition! This monthly* progress report is written by Frank DiCola and is focused entirely on how the game’s visuals have improved in the past month. If you are one of our beta testers, you’ve probably already seen this artwork firsthand. (Looking to sign up? Email me at contact@GameRevenant.com if you’re on iOS, or just go here to download if you’re on Android)

(*It’s been a while since I did one of these! We got so caught up in a bunch of year-end stuff with MAGFest 2018, I decided to wait until February to discuss the state of the game’s aesthetics. The good news is, this is a double helping of art updates!)

Without further excuses, let’s explore the major leaps forward we took since December!

 


 

 

Header-Forest

The Forest is Now Polished

Polish is a strange thing. You’re never really finished – you just keep making smaller and smaller increments towards perfection, never quite reaching it. Eventually you hit a point where the small changes aren’t worth it because they take too long and have very little payoff.

Check out this video of me walking through the game’s prologue:

The Forest is polished to the point where it’s worth polishing it! I only say that because there is an entire game still left to finish, so we can’t spend forever on the first few Levels. I will say though, I paid particular attention to these Levels because they are the first morsels of gameplay people will experience with Where Shadows Slumber. Leaving a bad impression here can permanently color people’s mental model of the game in a negative way, so it’s important to get it right.

 


 

 

Header-Jail

The Jail is Now Really Different

The next World in our “first time user experience” is a scary, lava filled jail where Obe has been taken prisoner. As he makes his escape, we teach the player about lights and the way they interact with shadows.

This World was quite difficult to get right. I still think some of it needs to be changed, but here’s where it’s at right now:

If you remember the blog post where I showed off the Jail World last time, you might be shocked to see that a lot has changed. I never liked the boxy, protruding walls I created for this World. It made it impossible to define complex shapes, and it cost a lot of polygons. As we polish the game, we also seek to optimize it, and that means giving your phones less information to compute each frame. Now the walls are much simpler, but still have a brutal “government building” quality to them.

Hopefully you support this drastic change! It’s the only World that’s undergoing such a dramatic shift, but I think it’s for the best.

 


 

 

Header-City

The City is Still Unfinished

To my great shame, the City World is still not polished. Some Levels (one in particular) don’t even look passable. That’s a problem I’ll try to rectify immediately, as the World is already late, even by our newly revised schedule.

What I can show you are two Levels still in polish-development, because I would like feedback from the general Game Revenant fanbase! Here’s the first City Level, called “Slum”, which got a big overhaul:

City-Slum.JPG

And below is Level four in the City, called “Fountain”, which I don’t think I ever showed because it wasn’t in great shape. It’s still missing two key components that require very specific artwork: plants and statues for the fountain. Right now it looks very sterile, but this is supposed to be a luxury fountain / garden fit for a king! Check it out:

City-Fountain.JPG

This red color is a deep callback only diehard WSS fans will recognize [ ^_^]!

Comment below this post about these changes, please! This World needed a lot removed from it in order to look good. It had way too many colors before, as well as misleading stuff on the screen. It’s not done just yet, as I said, but it’s in way better shape.

 

Header-Spoilers.JPG

Spoilers Ahead

As we near the completion of the final game, I’m going to get a bit more secretive with these updates. I realize now that although some sections of the game look awesome, players may want to experience them for the first time inside the game instead of in a blog post. That doesn’t mean I’ll stop posting, but it does mean you can expect to see spoiler tags in these art posts from now on. I’m waiving that this time around since most of the updates are in the first 10 minutes of gameplay, but be warned!

In the future, read on at your own peril…

 

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

We hope you enjoyed this update about the game’s artwork. Have a question about aesthetics that wasn’t mentioned here? You can find out more about our game at WhereShadowsSlumber.com, ask us on Twitter (@GameRevenant), Facebookitch.io, or Twitch, and feel free to email us directly at contact@GameRevenant.com.

Frank DiCola is the founder of Game Revenant and the artist for Where Shadows Slumber.