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.

3 Ways Our Art Changed In May 2017

Last week, Jack wrote a general progress update about the game. We hadn’t done one in a while, and we’re trying to get our audience more informed about the process of game development. Inspired by his post, I’ve decided to dedicate the last post of every month to an update about the visual aesthetics in our game. We’ll review everything that got done in the previous month, with a small glimpse of the road ahead and how it relates to the larger goal of completing the game.

 

 

Getting The Ball Rolling On Five Worlds

Our game will feature 8 different Worlds by the time we’re done. Completing the artwork for all of those will take a while, so it’s never too early to get started. I had hoped to get more done this month, but I am glad to report that five of these Worlds have been started. They may never really be “finished” because I’m a perfectionist. Even when the game launches, I’ll still want to change things. But I might as well get them to a place where Jack can say “Frank, stop working! Step away from the computer!”. I’ve included some Work In Progress shots of each World below.

World-0-Forest

World 0 – Forest. This kit needs a lot of work. The bushes are too high-fidelity, and the trees are too low-fidelity. This is a screenshot of the game’s first Level.

World-1-Jail

World 1 – Jail. This kit exceeded my expectations. I wanted to convey the feeling of a claustrophobic, harsh volcanic prison. The brutalist-inspired walls really pull the aesthetic together.

World-2-River

World 2 – River. Inspired by the river styx, this is designed as a swampy, foreboding, gross river. Rickety wooden plank bridges contrast with log-cabin style barricades.

World-6-Summit

World 6 – Summit. One of the toughest to apply modular asset creation to so far. Blurring the grid lines was key to pulling this wintry, icy art kit together.

World-7-Paradise

World 7 – Paradise. This kit is complete, and looks gorgeous. I won’t actively work on it anymore unless something is missing in a Level we’re designing.

Please note that the screenshots included here don’t always reflect actual Levels in the game. Sometimes, to show off how pieces of artwork interact, I design fake Levels in the spirit of the game. Hopefully it gives you a good idea of my progress, and what needs to be done. I also decided to pawn off water effects onto Jack, so that’s why the fluids in these Levels just look like flat planes. (I built them with flat planes) Water will come later. Also coming later – the Worlds I haven’t started yet!

Expect to see screenshots of Worlds 3, 4, and 5 during next month’s update.

 

TwoHeads

Character Faces

One of the barriers I’ve been trying to break through is my Character Design issue. Every humanoid model I’ve created for Where Shadows Slumber so far has been hastily created for an upcoming deadline. The result is a slipshod model that looks nice from 1,000 feet away, but performs poorly when I need it to do something. In a previous blog post about cutscenes, I lamented at how terribly the Demo protagonist handled when I needed to animate him. His clothing had to be key-framed by hand, and his arms were bent out of whack.

But one of the biggest problems was his face. I modeled it the quick and easy way, and as the saying goes, you get what you pay for. I found it impossible to give him good facial expressions when the situation called for it.

HeadAnimations

The protagonist’s new head uses Morphs to smoothly transition between preset facial poses.

Flash forward to this month: I’m taking a new approach where I model character heads separately from their bodies so I can focus on facial animations using Morphs in 3DS Max. As long as no one notices that these heads are disconnected from their torsos, the effect works. Morphs allow me to model facial animations (frowns, smiles, surprise, anger) and move a slider from 0 – 100 to set the Intensity of the animation. How sad are you? Are you 35 sad, or 100 sad?

So far I modeled the main character’s head, along with a mysterious Wolf that no one knows about. The main character’s facial animations are done. In the future I’ll model two other mysterious figures that need facial animations… but I won’t give them away now!

Expect to see more character head animations during next month’s update. I’ll also do a more in-depth blog post about Facial Animation Using Morphs.

 

EveryUI.png

Main Menu User Interface

This piece of artwork is still in the planning stages. Unfortunately, I ran out of time this week and had to resort to paper-planning. I would have preferred to mock this up in Photoshop, but my computer died on me before I got around to it (more on that below).

HammerUI.png

Left: The main menu splash screen you see when loading up the game on your device. Right: The Settings and Junk page you see when you press the hammer button on the splash screen.

The plan for the UI is to make it as minimalist as possible, and refrain from using unnecessary text. To that end, I’m currently envisioning a bare bones splash page that just has the protagonist relaxing by a campfire and two buttons on it – a hammer and an arrow. The hammer is meant to indicate “Settings and Junk”. When pressed, it takes you to a side page where you can toggle various togglers™, such as the game language, in-game sound, and auto-skipping cutscenes. Team credits will be displayed there as well. An “X” at the bottom represents “go back” and I’ll try to keep that consistent throughout the whole game.

20170530_143221.jpg

Left: A screen of World 0. Center: A screen of World 1. Right: Half of a screen of World 2, which is locked and cannot be accessed.

The World menu is more involved. Pressing the arrow moves the camera to the right, where we see a 2D view of the first World, Forest. From there, players can swipe left and right to see the other Worlds. Worlds that they aren’t ready to play yet will be locked behind a padlock icon. (No need to reinvent the wheel there) When you’re looking at a World, I want the sounds of that World to play quietly in the background.

20170530_143238.jpg

Tiny overworld map of World 0, which begins with a cutscene “Level” and then has three real Levels. Some are blocked by the shadow.

Pressing the big juicy button with a number on it will take you to the Level Select menu for that World. This will look like a top-down map, with little circles representing the levels each connected by solid black pathways. As you beat more Levels, this map floods with more light. Pressing on a circle will take you to that Level.

That’s the flow I have in mind for the game’s menu. This doesn’t even cover menus that appear INSIDE the game’s Levels, such as when you press the pause button. But in any event, I believe I’ve covered everything the outer menu needs. I just hope this isn’t too much fiddling for a casual audience that isn’t used to games. Getting casual players over these hurdles is always a struggle!

Expect to see a digital version of this UI during next month’s update.

 

DAxOPKeVoAAK6FY

And now his watch is ended.

Tempus Fugit: Memento Mori

Normally in these blog posts, I showcase my cheery optimistic attitude. But not this time.

Late last week, my laptop suffered a blue screen crash and would not reboot to Windows when I tried turning it back on. I’ve been having rolling blue screen crashes for a while, but it usually restarted afterward. Now my computer is in the repair shop, and I’m getting the impression that it doesn’t look good. Probably because the technician told me “this doesn’t look good.” That’s what I get for ignoring the crashes all this time and refusing to pay for cutting-edge anti-virus software.

As I write this blog post on my old college ASUS laptop, I have mountains of artwork to do and very little time to do it. This laptop crash is going to set me back. The worst part is, it’s a waste of time that didn’t need to happen. Fortunately, no artwork was lost because everything is always on GitHub. I’m mostly worried about losing time.

My next update may be a little scarce, but hopefully it will include good news about my computer’s physical (and mental) health. Always back up your work online, kids! You never know when your next blue screen of death will be your last.

 

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

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), Facebook, itch.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.

Paradise Found

Now that artistic development of Where Shadows Slumber has begun in earnest, I have embarked on a long journey – creating each of the game’s Worlds. Up until now, we’ve been making demo levels strung together with a vague theme (Canyon, Aqueduct, Tomb) and worked backwards from design to find some kind of artistic through-line. But for the final game, Jack and I are taking a different approach. First, we planned out each of the game’s Worlds. Then, we designed Levels for those Worlds that fit their theme and orbited around a single mechanic. Now I’m at the part of the pipeline where it’s time to actually create modular art assets that can be used to create Levels inside each World.

Let’s unpack some of the jargon in that paragraph.

SPOILER WARNING: This blog post discusses the final World of “Where Shadows Slumber”, which is still in development. Although the game is subject to change, this can potentially ruin your experience if you intend to play the game without knowing where your journey leads. If you don’t want to have it spoiled, do not continue reading.

maxresdefault

What Are Worlds?

Call us old-fashioned, but Jack and I grew up playing games like Super Mario, which was organized around a World/Level paradigm. You had to beat each of the Levels in World 1 in order to progress to World 2.

Defining a Level is easy enough because our demo has 9 of them – a Level is a single screen of the game, with a large puzzle to complete. Often it is comprised of multiple smaller puzzles. Some Levels early in the game are designed to introduce Players to new concepts. Levels that come later serve as final exams, testing the Player. Can you put what you’ve learned to use in order to solve a really complex puzzle?

If Levels are just puzzles, Worlds are the aesthetic glue that bundles them together and gives the game a story. A game with 30 grey, silent puzzles is going to rapidly become boring and repetitive. How can you tell a story that way? By grouping our Levels into Worlds, we can indicate to our Player that your character is traveling on a journey. You start in a Forest World – eventually, you get to a City World. The developers are making a clear statement: this game exists in a physical space, and your character’s success in his journey is based on whether or not he reaches his destination.

Best of all, we don’t need to use a lot of words to communicate this during the game. Once you realize you’ve completed a World and moved on to a new one that looks radically different, there’s a sense of accomplishment. Even better, curiosity drives the Player’s engagement from this point onward. “What other Worlds did they put in the game?”, one wonders. “I have to beat this Level. It’s the last one in World 4, and I’m dying to see World 5!”

bermuda-after-xl

Inspirations For World 7 – “Paradise”

Now that we’ve defined what Worlds are, we can discuss my process for designing what each one looks like. For this blog post I decided to focus on my current project, World 7 – “Paradise”. Don’t get your hopes up here! I’m not working on these chronologically. I actually started with World 7. This is by no means an indication that I’m almost done with the game’s artwork. Not even close.

Most of the Worlds in our game are inspired by real life locations. The Forest World is obviously inspired by large wooded areas in temperate zones. Some Worlds have even more specific inspirations, however. World 7 is supposed to be a paradise – a floating garden in the clouds where your journey ends. I wanted to make it feel heavenly and relaxing without relying on tired mythological tropes like pearly gates and clouds. What to do?

“You go to heaven if you want to — I’d rather stay right here in Bermuda.”

– Mark Twain, during his final visit to the island shortly before his death.

I decided to use the unique architecture found on the island of Bermuda as a template. The tropical island is quite beautiful due to its crystal clear blue water, pink sand beaches, and lush vegetation. But in my many visits to the island (my family loves to travel there) I have found that the human architecture adds to the island’s beauty, rather than detract from it.

p532571176-3

Since Bermuda is an island in the ocean, fresh water is scarce. They must collect rain water from whatever storms pass by and hoard them in water tanks underneath their homes. Because of this technology, every single roof in Bermuda is made from white limestone and has a ridged pyramid-like shape, optimized for water collection. I’ve never seen it anywhere else, and I find the uniformity soothing – like small white mountains popping out amidst the island’s trees.

I’m not sure why, but home owners in Bermuda have also taken to painting their stone houses with bright pastel colors that really stand out. Everything from dark cerulean, pink, yellow, light red, teal, and even bright green can be found as you glance at a Bermudian city. It’s a welcome departure from the reddish brick of Hoboken, New Jersey – not to mention the grey steel glass of nearby Manhattan. The entire island of Bermuda is brimming with life, and the island’s human residents don’t mire the look of the tropical paradise one bit.

cherry-blossom-4

On a separate note, I’ve always found the Japanese cherry blossom to be both vibrantly beautiful and soothing. In full bloom, they have dazzling pink flowers at the tip of each branch. They fit better into this “Bermuda as heavenly paradise” design than palm trees do, so I’d like to include them as well.

bermuda-rooftops-houses-colorful

Picking Crayons – A Color Palette For Paradise

Once I decided that this tropical paradise would become our game’s final destination, I set out to capture the beauty in an organized fashion. I asked myself two important questions:

  1. If you could use no more than 10 colors, which ones best represent Bermuda?
  2. What is the best way to create a modular set of pieces that can be used to build similar architecture?

The result of the first question is found below. This is the color palette for World 7. It’s a bit like picking out only certain crayons from the box and sticking with them. Deciding on a color palette is a good way to rein in my creativity and make sure I’m not just picking random colors when it comes time to make the real game.

ColorPalettes_7_Paradise

I created this by using some images of Bermuda from Google Images and picking out colors with the eyedropper tool in Photoshop. It’s a good way of breaking out of my shell in order to use tones and hues I might otherwise not select from a color wheel. Snaking from top left, to bottom left, and then to the next row:

  • Limestone White: This white color will be used for rooftops in this World.
  • Limestone Blue: This blue is actually going to be used for when the limestone is in shadow, for a stark contrast.
  • Yellow, Purple, Green, Red: These four colors are going to be what houses are painted with. I picked the most Easter-ish ones I could find.
  • Sky Blue: Since this World is floating, you’ll be able to see the sky in the background. This solid color will serve that purpose.
  • Dark Green: The grass and trees in this World are a lush green.
  • Cherry Pink: I want to have cherry blossoms in full bloom in this World.
  • Cherry Brown: The cherry trees need to have a bark, after all. But not too dark!

There’s no way I’ll stick to just these colors, but it serves as a good baseline. You can tell just by looking at the grid of 10 above that this World is brighter and more peaceful than the ones preceding it. I hope it will be a welcome sight to Players who have reached the end of our game.

3DSMAX

Modeling Modular Members of Paradise

Say that 10 times fast.

Once we know what the final result will look like, and we have colors and reference images to guide us, it’s time to model some pieces in 3D. To build a Level in this grid-based puzzle game, we need 1×1 pieces that can snap together to form walkways, obstacles, and doorways.

As you can see from the Autodesk 3DS Max screenshot above, each piece is modeled separately and laid out in an organized manner. They are precisely the size they need to be, and their rotation is preset so that we don’t have to mess with them in Unity. With an organized set of tiles like this, even a non-artist member of the team can snap them together like jigsaw pieces.

It might not look like much, but when they are combined together in Unity, they can form complete shapes that resemble Bermuda:

Bermuda

Assembled in Unity entirely from modular World 7 pieces.

This process is not yet complete, but I feel confident in the direction I’m heading. The floor tiles all have beautiful banisters on them. The roof tiles (purely decorative) mirror the strange step-like quality of Bermuda’s. The open shutters give a sense that the island is prepared for the worst, but enjoying the calm before the storm.

I’ll post more process pictures as I complete more 3D models. But until then, I hope you’ve enjoyed this in-depth look at how much work goes into designing a single World of the game. Hopefully this front-loaded design work makes it easier to create beautiful Levels later down the road.

 

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

Got a picture of Bermuda you’d like to share? Have a question about aesthetic design that was not answered here? You can find out more about our game at WhereShadowsSlumber.com, ask us on Twitter (@GameRevenant), Facebook, itch.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.

Art Spotlight: Cutscenes, Part II

I’m happy to report that as of today, the demo’s final cutscene is complete. This signals the end of an era – we won’t be updating the demo much more after this. You’ll be able to see the cutscene when you beat Level 9, right before we roll the credits. The next time we update the demo will be when we add language support for multiple regions – and we’re only doing that so we have some practice before we do it for real in the final game.

You can watch the cutscene below, using this YouTube link. Forgive the resolution, but remember – this will be playing in portrait mode on phones and tablets. It’s not meant for a wide screen like your computer.

 

I suggest you watch it before reading the rest of this blog post! It’s 90 seconds long and includes sound, so get your headphones. It may be “safe for work”, depending on where you work I guess… more on that in the next section.

 

M

Why Is The Demo Rated “M” on Google Play?

You’re looking at it. The story of Where Shadows Slumber is rather grim, and includes some violent imagery. For this reason, I chose to give the game’s demo an M rating when I uploaded it to Google Play. It’s entirely possible that I overshot things. Perhaps this is more of a “T” level of violence, or possibly even “E” for cartoon violence. I’d rather err on the side of caution. We took a chance with Apple by going for 9+ under the label “Infrequent / Mild Horror / Fear Themes”.

This is a bold step Jack and I have taken, and it remains to be seen whether or not it pays off. Many fans have told us that their young children (4 to 9 years of age) really enjoyed playing the demo. We may alienate those users by having such violent story elements in the game. It’s possible that the final game will include a Safe Mode where all of the game’s movies are instantly skipped without alerting the player. Or maybe we’re being too cautious.

The reception we get to this cutscene will greatly impact the game’s final story. Right now it’s a bit violent, with few hopeful moments along the way. If an official from Apple or Google warns us that this will turn off large groups of users, you may see a more sanitized version of this story appear next year when we release the game. My hope is that we actually attract people by giving them a narrative with teeth that tells a meaningful, adult story. Time will tell if I am wrong!

 

Cloth

When you examine the edges on the skirt, it becomes clear how it can’t deform properly.

This Cutscene: What Went Wrong

Many close friends of the developers have asked us why we bothered to make this cutscene at all. As I stated in Part I of this series, this was a huge endeavor that required over 40 man-hours to complete, over a span of a few weeks. Since it will not be included in the final game, why spend all that time on it? Most players will never even watch this cutscene, and it is only tangentially related to the final game.

I’ll tell you why – it’s because it was a darn good learning experience, that’s why! The process of making this cutscene was grueling, and it showed me a few ways I could improve my process in the future. Since we want the final game to have somewhere around 16 cutscenes, it’s important to work efficiently. Otherwise, you can expect that number to drop to about 3. Without further ado, here’s three things that I could do better in the future:

Cloth Simulation: The protagonist is wearing two robes. One is a white cassock that has sleeves and a skirt. The other is a blue priestly-looking mantle. For the most part, this cloth is controlled by following the character’s bones. That is, when his right arm moves, his right sleeve goes along for the ride. But his skirt is controlled by 30 separate bones, which is stupid. I hate that I built him that way, and I have resolved to change him for the final game. I’d much rather have 3DS Max simulate the skirt as cloth, and then bring that animation into Unity. I’ll sacrifice control, but I’ll gain time. It’s worth it!

Footstep Audio: Most of the effort that went into recording sound was spent creating the sound of footsteps. I’m not really pleased with how they came out, because they are very loud and a bit too prominent. Regardless, it struck me that I ought to be able to automatically generate these “footfalls”. Jack set up a system to do this in the game itself, so we could have done it in the cutscene with different parameters. Alas, I only just thought of it, so I spent a ton of time painstakingly matching footstep sounds with the animations on screen. In general, having an audio expert who is a part of the team (and receives a cut of the game’s proceeds, or some kind of salary) would save a lot of time.

Character Rigging: This is kind of related to the cloth comment above, but it’s worth mentioning that these characters were measured and found wanting once I really began animating them. Their left arm broke and began bending oddly. Their shin bones contorted out of proportion. Their faces are weird, ranging from expressionless to cartoonish. These things are all my fault, and I need to retrain myself in 3D rigging before I redo the character model for the final game.

 

sddefault

If you’re investing in a sound recorder, the Zoom H4n Pro is a good choice for indies.

This Cutscene: Strategies That Paid Off

It wasn’t all bad, though! There were some strategies I employed that paid off in the end. Either they worked better than expected, or they allowed me to create a passable product so I could move on from this. 10 / 10 would do again:

Zoom Recorder: I recorded the sound for this demo cutscene using a Zoom H4n Pro field recorder. It’s a lightweight microphone the size of an old Gameboy that I used a lot in college. Now that I have my own (or rather, the company has its own) I have to say I’m quite pleased with it. If we don’t hire a dedicated sound team member, I’ll have no qualms about recording everything myself using the Zoom.

Audacity Mixer: Audacity is a free sound mixing program, and it got the job done. It has its quirks and I’d happily switch to another free program if I could find a better one. But for now, I know how to use it and it didn’t give me too much trouble. The final game’s audio will be made in Audacity unless I switch to an Adobe sound program since I’m paying for that whole suite anyway.

3DS CAT and Unity: The pipeline from 3DS Max to Unity worked as intended. I never experienced any problems getting Finale.FBX out of my animation program and into the Unity scene. This is promising, and it means 3DS Max will remain my tool of choice as we head into the final game.

 

Rekt

Coming To A Build Near You

I can’t exactly say when, but this cutscene will be added to the demo build at some point in the future. We’re trying not to do too much more to the demo build since it won’t make us any money and may not even guarantee future sales of the real game. Still, it should put to bed any questions people have about whether or not Where Shadows Slumber will have a story when it is released next year. It will hopefully also give us insight into how people might react to the final game’s narrative. If we see a massive spike in bad reviews right after we patch this into the demo, we’ll get the message loud and clear.

Thanks for reading this series! I hope it was an informative look behind the scenes. Feel free to send in any questions you may have – it’s possible I’ll do a third one of these at some point where I just answer questions from fans.

 

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

Looking for something about cutscenes that wasn’t addressed? You can find out more about our game at WhereShadowsSlumber.com, ask us on Twitter (@GameRevenant), Facebook, itch.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.

Art Spotlight: Cutscenes, Part I

For the past few weeks, Jack and I have been working on transitioning from the Demo Version to the Final Version of Where Shadows Slumber. One of the finishing touches I’m committed to adding to our demo is a short cutscene that plays when you beat the game. Our fans are always asking us if the game will have some kind of a story. The answer is yes, it absolutely will! But the nature of mobile entertainment and puzzle games in general dictates that we tell a certain kind of story in a certain kind of way.

 

860e6bef748f96c0bfd4d8d5b79626a4

Screenshot from one of Monument Valley’s cutscenes.

Why Cutscenes?

When we decided we wanted the game to have a story, we looked at other successful mobile games (see Monument Valley, above) as well as the games Jack and I usually like to play. It seemed that short cutscenes, placed directly after the player “achieved” something notable, were the best way to hold people’s attention. Jack loves listening to all of the audio books in Diablo 3, and I loved reading entire libraries in games like Morrowind and Skyrim. However, for a casual gamer, massive amounts of text can seem like an information overload. Not to mention, that creates a lot more work for our translator – which translates into a serious cost for us.

It’s also worth mentioning that mobile gamers don’t often play games with the sound on. Clearly, investing our time in fully voice-acted content wouldn’t be worth it. Who would ever hear it? When you think about it, given these constraints, we didn’t have many options.

  1. Mobile gamers can’t hear your game
  2. Casual gamers want a story, but not an epic saga
  3. Mobile gamers play the game in short bursts
  4. The more voice over work and text we have, the more we need to translate

Since the above four points are a given, we decided to have short cutscenes at the beginning and end of every World in our game to serve as end-caps. The action in each of these animated scenes will be completely wordless and textless, and tell a story through body language alone. Sound will be present, but it won’t be important. The cutscenes themselves each tell a unique piece of the story, and may even seem disconnected. This is all by design!

 

3Ds

3DS Max is used to animate the actors, and the file is then interpreted by Unity.

The Technology Being Used

All of the artwork in Where Shadows Slumber is done in a program called Autodesk 3DS Max. I’ve used many studios in my years as an animator, but this was one of the first I ever tried and something about it called me back.

3DS Max is used to create characters (modelling), paint them (texturing), give them bones and animation handles (rigging), and make them move around (animation).

Then, these animations play in real-time within Unity. So when you’re watching a cutscene, you’re really watching the game – not something that was rendered ahead of time as a series of images and played back like a film. It was important to me that we use Unity to its full potential, and always kept players “in the game world”.

 

regret

Within Unity, the actors are given color and lighting.

Process: The Inverted Cone of Cutscenes

When working on a large project like this cutscene, it’s important to work in stages and have clear checkpoints. And make no mistake, even a cutscene that is 1 minute long is a large project! I have spent close to 30 hours on it so far, and I’m not even finished. The problem with stuff like this is that if you want to change something, usually you have to undo or throw out a ton of work. It’s important to make sure that doesn’t happen, and that you start with a wide range of possibilities but eventually focus in on what the cutscene is going to be.

For some insight into how a cutscene begins wide and then narrows to completion, look at this graph:

CutsceneBlog

The further you go down the inverted cone, the more work you lose if you change something.

See the arrow – I am currently at the end stage of Principal Animation. That means the actors all have their general motions and you can tell what’s going on in the scene. But it still isn’t finished! Look at all of the other stuff that has to be done.

The reason things like cloth motion and sound come last is because, should we decide to change some of the Principal Animation, we would have to throw out all of that “detail work” anyway. So it just makes sense to save it for last and only work on it when the work at the top of the cone has been checked and locked.

 

skirt.PNG

The player’s cassock (the white tunic) is animated using 30 individual bones!

Regrets So Far

You don’t work on a game without having some serious regrets. Every regret I have so far regarding this process has to do with time – something I did, did poorly, or did not do, that cost me precious time and made us push our deadlines back.

Giving the character cloth robes: I love robes. I love cloth. But I foolishly decided to give our main character cloth robes that must be painstakingly controlled via spider-leg-like bone tendrils. This process is maddening, takes forever, and never looks good. I regret not using Cloth simulation, something 3DS Max provides and Unity supports.

His dumb hand bones: This is something you would never know from watching the in-game cutscene, but the main character’s hand Bone (an invisible puppet-string object) is stupid, dumb, too big, and I don’t like it. I should have made them smaller. Also I think his left arm bends the wrong way. Let’s just say I ought to re-do his entire rig.

Link To World broke everything: I used a parent-child relationship to allow the characters in the scene to hold objects (i.e. the lantern, the urn, the chest, the scepter, the bowl). This worked perfectly! Except… for some reason, the first time I set up linking on my character’s IK hand setup, it wigged out and sent his hands flying off screen for every single frame of animation I had done previously. This was clearly some kind of offset error, but I never found a good solution. I ended up reanimating his hands halfway through!

People would rather have more levels anyway: The sad truth is, this is a puzzle game. People want puzzles. (“More levels!” – The Proletariat) As much as they may say they want a story, the truth is we’ll get more mileage out of working hard on puzzles instead. It may be that the cutscene is there for a different purpose. My own ego? Winning artsy indie game awards?

Everything mentioned here made me lose time and work on this far longer than I should have, making us weeks (if not months) behind schedule for a demo that was supposed to be done already. Perfect is the enemy of good enough! Live and learn, right? That’s the beauty of working on a demo first. I now know what not to do for the final game! Let’s just hope the damage hasn’t already been done by now.

 

Next Blog Post

By the time I have to write Part 2 of this blog, I should be finished with the cutscene. I can show it to you in full and we’ll do a bit of a postmortem on it. I can give you the short version of the postmortem now: the cutscene is a lot of work, there’s very little payoff (I assume), and the subject matter is controversial. Nevertheless, here’s a sneak peek at it to tide you over until then…

 

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

Interested in hearing about the game, now that you’ve peeked behind the scenes? You can find out more about our game at WhereShadowsSlumber.com, find us on Twitter (@GameRevenant), Facebook, itch.io, or Twitch, and feel free to email us directly with any questions or feedback at contact@GameRevenant.com.

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