Something is Coming…

 

 

 

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

That’s all for now. If you’re new to this blog, 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 – August 2018

Welcome to the State Of The Art, August 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 July edition is right here.

 


For Our Eyes Only

A quick note, before we dive in… since this is the final State of the Art, it’s going to be a little bit underwhelming. Sorry about that! The game is so close to being finished that Jack and I don’t really want to release any more images or footage until Where Shadows Slumber is uploaded onto the App Store. In the past, journalists have accidentally used our old images of previous builds (including our 2016 Demo!) in their articles instead of new stuff. For that reason, we’re trying to put some distance between our progress related uploads and the launch of the game.

If you were lucky enough to visit us this past weekend at Play NYC, you got a chance to play the final pre-release build of the game! As you would have seen, all of the art is totally done with the exception of a few cutscenes that need some polish. We brought a build that had every Level and Cutscene in the game, so we got a chance to see people play every part of the finished build. Two brave souls even dedicated a few hours (across both days) to finishing the entire game! So even though there are no new images in this article, rest assured that this is a good sign of progress, and not a bad sign that I’ve been sitting on my hands the past 6 weeks!

Thank you so much for following this blog, and I apologize for the lack of juicy spoiler images. You’ll have to wait until the game launches on iOS and Android later this year to feast your eyes on the beauty that is Where Shadows Slumber. Until then, enjoy these sweet black rectangles!

 

 

Black

Art, Then and Now

The last State of the Art was written on July 3rd. At the time, the only pieces of art left to do were the game’s last four cutscenes – World 5, World 6, World 7, and an animated Credits sequence. Small artistic touch-ups were needed across the game’s many Levels, as well as a few art related bugs.

Those last four cutscenes are all nearly complete. I say nearly because, since time is of the essence, I animated them just far enough so that our wonderful audio team could take over and begin creating sound effects. Today, in an effort to finally finish the game, I’ll put the last little details into these scenes. These details include things like snowy footprints or rustling trees – background information that isn’t necessary, but helps to paint a better picture of the scene. I know Jack is eager to crunch every Level and Cutscene so we can have a fully 100% optimized game, so right now it’s more important to call these scenes done than to obsess over the details. I shall spend not one more day on them!

Other than that, there are some release prep things I still need to do. I try to focus on tasks that involve other people first, which means I put off some solo projects like the game’s app icon, app preview video, press kit, and our release date announcement trailer. We’re not announcing our release date yet, but [spoiler] when we do it will be in the form of a cool trailer! We’ve heard that’s the best way to generate buzz for the game. Hopefully our efforts these past 2 years to “pre-market” the game mean that when the trailer hits YouTube there is a large group of fans eager to share it around social media.

 

Black

Thoughts on The Ending

Soon, I will stop being the artist on Where Shadows Slumber and become Mr. Bug Finder. Then, in the weeks before the game hits the App Store, I’ll be Mr. Marketer. After that, I’ll be Mr. Salesman as I go on the Extremely Real and Actually Real Where Shadows Slumber World Tour! (Buy our game so we can do this)

It’s so strange to think that in just a few days, I won’t be modeling environments or animating these characters ever again. Saying goodbye is a bit of a relief, but it’s also disturbing. It feels a bit like leaving a job at a company without having another one lined up. And I’m not talking about the financial success of the game (we have no idea what to expect… $500? $500,000?) but rather my own personal sense of purpose. I never thought I would feel totally lost right at the moment our three year passion project is about to hit prime-time. Is this normal? How am I supposed to feel?

Anyway, this is the State of the Art blog, not the State of Frank’s Mind blog. Let me save my goopy tell-all for a podcast appearance with Jack sometime. (Speaking of which, even if you have the tiniest, most insignificant YouTube channel or podcast, invite one of us on! We love to talk! Contact info in the signature below) All you need to know right now is that the art is 98% finished and we’re heading into our final Quality Assurance (QA) stretch.

Stay tuned to this blog for mega updates about the game, tales from QA hell, and maybe even a comedic play-by-play of our upcoming Xcode struggle. Thanks to Jack for giving me a good name for this blog, and thanks to everyone who has been keeping tabs on us. I may resurrect this monthly recap if we have new art updates, such as when we port the game to Amazon’s Alexa, but right now I’m looking forward to wearing a different hat for a while.

See you next week!

 

 

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

Thanks for reading this entirely text-based art update! If you’re new to this blog, 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.

All About App Icons

As the completion date of Where Shadows Slumber draws near, Jack and I are coming to terms with just how much work it takes to finish a game. This means we’re revisiting old tasks that we didn’t have to deal with for a while, including the game’s app icon.

It may seem like a small detail, but your game’s icon is very important. It isn’t exactly the same as your game’s logo, but in certain contexts it plays the same role. The app icon is the rounded square button on your customer’s phone menu that they have to press to start playing your game. More importantly, this icon is on prominent display on marketplaces like the App Store and is often a potential customer’s first impression of your game.

Viewed through that lens, the app icon is immensely important and I regret not working on it sooner. It’s just a small graphic, though… how difficult could it be?

Fortunately, I’ve been researching this topic for a little while now. Below, I’ve compiled a gallery of some of my favorite app icons. We’ll also discuss in this blog post my personal “do’s and don’ts” for these graphics, inspired by both previous iterations of the Where Shadows Slumber app icon.

 


 

 

Inspiring Icons

I played a lot of mobile games during the creation of Where Shadows Slumber. That’s not because I’m lazy! I wanted to see what successful mobile games did. I spent a long time looking at their store listings, reading reviews, poring over their descriptions, and – of course – checking out app icons. It wouldn’t be a Where Shadows Slumber blog post if we didn’t gush over Monument Valley, so let’s start there.

AppIcon-Monument-Valley.JPG

The app icon for Monument Valley is really beautiful and shows off what the in-game art looks like. When you look at the icon on your device, the scale of Ida here probably matches her scale in the game. That makes this graphic one of the most honest app icons in the business! From a distance, you can clearly make out her shape because her white body contrasts starkly with the green backdrop. I also love that this picture shows the isometric angle and color shading that they use in the game. Sadly, this image does not communicate the game’s M.C. Escher inspired puzzles… but how the heck could you even show that? Maybe I shouldn’t worry too much about showing “shadow puzzles” in a tiny square image. It would just never fit!

AppIcon-Monument-Valley-2

The app icon for Monument Valley 2 was constrained somewhat by the first. The artist likely felt the need to match the style of the previous icon. Now that they’ve got a pattern established, expect to see something like this if they ever make Monument Valley 3. Still, the fact that this icon communicates the relationship between a mother and daughter tells you a lot about the game’s story and mechanics.

AppIcon-Sneaky.png

The real reason I bring up Monument Valley 2 is because of something I noticed when I was in an Apple Store the other day, getting a new iPad for my Dad. On their demo devices, the game is labeled simply as “Monument 2,” because the name is too long. Notice also that the game Alto’s Odyssey is just named “Odyssey.” I’ve wondered what Jack and I should do with our lengthy title Where Shadows Slumber… should it be listed as “Slumber,” “Shadows Slumber,” or “Shadows?”

AppIcon-AltosAdventure

Speaking of Alto’s Odyssey, both games in the Alto series have very beautiful app icons. However, it seems to me that the original is better because it actually communicates the mechanics of the game. Take a look at the icon above, and then look at Alto’s Odyssey below. Remember that these games have identical gameplay: both are side-scrolling snowboarding simulators. Notice anything?

AppIcon-AltosOdyssey.JPG

Alto’s Odyssey doesn’t have an image of a dude flipping over a windmill like the first game did! That’s pretty important because the whole game is about jumping over stuff, getting airtime, and doing tricks. But when I see the icon above for Alto’s Odyssey, I imagine a different game where I can actually go into some of those ruins or fly in that hot air balloon. It doesn’t set up expectations the way you might expect. Even so, the image is gorgeous and communicates the art style faithfully.

AppIcon-Prune

Of all the games I researched, my favorite app icon is probably the one for Prune. Look at this beautiful picture! Since I played the game, I happen to know that this app icon is actually a perfect rendition of what every Level looks like, too. Now that’s honesty! Prune is a game where you swipe away branches from a tree to help it grow the right way. I think you wanted to avoid the big red suns because they killed your tree. It’s a beautiful game, and the simple nature of this app icon does it justice.

We’ve looked at a lot of great artwork, but I don’t feel like comparing them to a list of “bad examples” in this blog post. I feel uncomfortable putting down other people’s work besides my own. There is no point in searching the App Store for apps that performed poorly and then ripping their icons apart. Instead, let’s just criticize the two icons I made earlier in the project cycle!

 

AppIcon-Gallery.png

Learning From My Mistakes

If you’ve ever played our free iOS Demo before, or if you are one of our beta testers, or even if you’re just a diehard follower of this blog, you’ve seen one of our app icons before. We aren’t going to use either of these for the final game’s release, so I’d like to write about them in this space.

AppIcon-WSS-2016.JPG

Our first app icon was created just for the Demo. I whipped this up in Adobe Illustrator over a year ago. The idea was to show a silhouette of Obe in a doorway, with the lantern clearly visible. Looking back on it now, this fails for a variety of reasons:

  1. This image is very detailed, so the intricacies are hard to make out at small sizes
  2. This icon requires pre-existing knowledge about what Obe looks like
  3. The lantern looked weirder back then, so it’s not immediately recognizable
  4. This looks like an icon for a horror game, almost like Amnesia for mobile phones
  5. This doesn’t really look like the art in the game at all
  6. This doesn’t really look like an app icon for a mobile puzzle game
  7. This is misleading because Obe’s body never actually casts shadows

I’m not saying I hate it or I regret making it – it seemed cool at the time! Our Demo drew in over 310,000 free installs on Android alone, so we did something right. But I wouldn’t go for this kind of style for the final game. It’s too much of a departure from the real game’s art, tone, and genre.

AppIcon-WSS-2017

Our next app icon was made much faster and was basically an unofficial app icon. I just did this for the beta, and I didn’t put much effort into it. This one fails on two levels – first of all, it’s not very unique or inspiring. It’s just text. Anybody could make this, and it tells customers nothing about our game. Second, it includes English text. That means I’d need to make a different app icon for every language we release the game in! Why bother doing that when I can just create a cool image like ustwo did?

So for the game’s final icon I need one square image that contains no text, but communicates the following to the player:

  • The game’s reflective tone, with some ominous terror looming in the periphery
  • The game’s crisp light shading model
  • The importance of the lantern to the story
  • The idea that this is a puzzle game and not some other genre
  • The idea that this is a mobile game
  • A warning that this game is not for preteen children

Yikes! Wish me luck. I’ll take a shot at this during the week, in between animating the game’s remaining cutscenes and putting out other fires. Jack and I have spoken about our app icon informally in the past, so I have a pretty good idea of what we want. This analysis helped me crystallize my plan going forward.

We’ll have some exciting news to announce in the coming weeks, so stay tuned to this blog and thanks for reading!

 

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

We hope you enjoyed this update about the game’s graphic design. 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.

 

 

Optics

Hey, it’s me, Jack! For those of you who have been following our blog, you may have noticed that I haven’t posted in a while. You’re probably wondering what happened to me. Did Frank kick me to the curb? Did I abandon Where Shadows Slumber?

In all honesty, you probably didn’t even notice. Whatever the case, I haven’t gone anywhere! The reason I haven’t posted anything in a while is that, simply put, the stuff I’m working on isn’t all that interesting. Compared to action-packed cutscenes and beautiful artistic polish, bug-fixing and number-tweaking are pretty dull.

BugFixesCommit

An enthralling contribution

That’s why, this week, I want to talk about something that isn’t specific to Where Shadows Slumber, and has nothing to do with the work I’ve been doing this past month. Instead, I’m gonna talk about something that applies to everyone – not just in indie game development, but in any business at all!

Optics is an area of business management that is very closely associated with marketing and publicity. However, as its name suggests, it refers less to the way in which you’re introducing people to your product, and more to the way that your product is actually perceived. Optics isn’t an action that you take, it’s more of a general way in which you act about your company and/or product.

Optics – the scientific study of sight and the behavior of light, or the properties of transmission and deflection of other forms of radiation.

That’s not a very useful description, so here’s a quick example:

  • Posting on Facebook, putting up billboards, and going to conventions are all examples of marketing. Note that they’re all specific actions.
  • Deciding to be very transparent about your process, or always being snarky on social media are examples of optics. They’re more like predefined ways to act.

Let’s take a look at how thinking about optics has impacted Where Shadows Slumber.

Warning – as with any conversation about a product’s “image”, this next section may be a little pretentious.

Where Shadows Slumber‘s Optics

So, what are some ways in which we consider the optics of Where Shadows Slumber? Surely, this wouldn’t be a topical blog post if I didn’t discuss our application of the concept!

The answer to this question lies in how we want our users to think about Where Shadows Slumber. Consider the difference between a game like Monument Valley and something like Candy Crush. They’re both great, successful games, but the general public thinks about them differently. Monument Valley is artsy and represents a unique experience, whereas Candy Crush is a well-oiled time-killing machine that you can always open up and play. They’re different, and both successful, in part because they know what they are and how they’re perceived. How do we want Where Shadows Slumber to be perceived?

World-7-Paradise

Where Shadows Slumber – a beautiful, mysterious, puzzle game

Where Shadows Slumber is, at its core, mysterious. When thinking about Where Shadows Slumber, people find themselves wondering: Who is Obe? What is he running from, or to? What do his journey, his light, and his darkness represent?

Where Shadows Slumber is a puzzle game. When playing it, players aren’t simply following a path, but choosing one. They’re engaged, actively trying to figure out the puzzles. They feel a sense of agency – they are in control of the game.

Where Shadows Slumber is, for lack of a better term, art. When looking at it, people appreciate the colors and the aesthetic. They notice the attention to detail and the smoothness of the gameplay. They recognize immediately the time and effort that has gone into it.

I consider each of these things, and everything else that people think about Where Shadows Slumber, to be a part of our optics. When we’re making design decisions, we ask ourselves – “does this design continue to represent our game as an engaging puzzle game?” When choosing color palettes for a level, we wonder – “will these colors result in an image that someone would hang on a wall?” By continuously working toward our desired image with every decision that we make, we do our best to ensure that the public will view the game just as we want them to.

 

The Team!

Optics doesn’t just apply to the game itself – it applies to anything and everything on which a potential player might judge us. If you find out that a company has unethical business practices, you probably won’t buy their product, even if it’s the best one on the market. The optics of that company, not just the product, has affected your choice when considering it.

DREAM Team

What we want everyone to think about our team

The image that Frank and I portray as a team is just as important as the image that Where Shadows Slumber itself has. Our team optics are very carefully designed – two friends who met in a sketch comedy group in college, who love games so much that they just want to be a part of, and give back to, the indie gaming community? How can you not love that team? They sound like such cool bros! The fact that it’s actually true is just icing on the cake – now our optics include honesty and earnestness!

In fact, there are parts of our image that are purely invented for the sake of optics. Our friendship? It’s a total lie. Frank and I, after working together for nearly 5 years, simply hate each other. Why do you think we want the production of Where Shadows Slumber to be done so much? We don’t want to have to work together anymore!

Note: Sarcasm doesn’t come across very well in a pure-text format – Frank and I are actually very good friends!

17159203_1817437325174646_6524966612565150056_o

Best Friends!

Another example of optics is that note that I just made! I couldn’t let you leave, knowing the truth of our animosity! The truth is that we do hate each other – but it’s better for us if you think we’re best friends!

Note: Again, the above is sarcasm. Please disregard it!

Team

Seriously though, best friends! Frank wasn’t plotting his revenge at the moment this was taken!

As yet another example of optics, please direct your attention to that second note I just made! I have sworn a blood oath against Frank’s life! He has sworn vengeance against my family! A thousand-year feud ensues, ending only with the extinction of the human race!

Note: ……………….

This Blog!

The final thing I want to point out about the optics of Where Shadows Slumber is this blog itself! By being as transparent as possible about our process, and by connecting as much as we can with our fans and potential players, we do our best to present ourselves as a fun, interesting, and relatable team. By discussing the details of the implementation, design, and art of Where Shadows Slumber, we drive home the point that the game itself is an intricate and interesting experience. By offering tips, tricks, and advice for your own games, we give back to the community that we love so much, and establish ourselves as a part of that community.

Optics are an important part of creating any product. Without a part of your team dedicated to putting out a positive image of you and your product, it becomes the responsibility of every person on the team to actively contribute to your product’s optics. The image that you are striving to achieve should inform many of your decisions, whether they be design- or business-related.

Remember, you don’t want to just make a game – you want to look good doing it.

 

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

I hope this little foray into the world of optics helps you to better promote your own products. I don’t hope, however, that it causes you to question everything that we’ve ever said about Where Shadows Slumber! Either way, you can always find out more about our game at WhereShadowsSlumber.com, find us on Twitter (@GameRevenant), Facebookitch.io, or Twitch, join the Game Revenant Discord, and feel free to email us directly with any questions or feedback at contact@GameRevenant.com.

Jack Kelly is the head developer and designer for Where Shadows Slumber.

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.

Unity’s Performance Debugging Tools

Last week I discussed some of the basics of how rendering works in Unity. As I mentioned, all of that was setup for this week’s blog post. Since I’m working on rendering optimization now, I figured it would be a great time to go over the debugging tools Unity provides in order to aid rendering performance. Online resources can be a little scarcer for rendering than they are for other aspects of coding, so hopefully anyone who’s working on their own game might glean some useful information from this post. And even if you’re not working on anything right now, I hope you follow along and maybe learn a bit!

Unity is a nice little game engine, and, as such, it does a lot of the work for you. For the most part, when making a game, you don’t have to worry about the nitty-gritty stuff like rendering. When building for mobile, however (especially when you have specific graphics/lighting customization), you might have to descend into shader-land. Fortunately, Unity provides a few tools that can help you to deal with optimizing your rendering pipeline.

 

4-24-Profiler.JPG

Profiler

The first step in fixing rendering performance issues is to know about them. The best way to do that is with the Profiler window (Window -> Profiler). While you’re running your game, the Profiler keeps track of a lot of incredibly useful information, like how long each frame takes to render, split up by category. For instance, the Profiler will tell me that a frame took 60 milliseconds to run, 40 of which were due rendering and 15 from script execution, etc. This is the first place you should check when trying to improve performance – there’s no point in optimizing your rendering if it’s actually your scripts that are running slowly!

profiler

So much information!

For the purposes of rendering, there’s an entire Profiler section! The Rendering Profiler keeps track of the number of batches, setPass calls, triangles, and vertices in each frame. Looking here for inconsistencies, spikes, and just high numbers in general is a good way to get an idea of why your game is taking so long to render. The Profiler also has a lot of other info that’s useful for diagnosing and debugging performance problems. I really recommend profiling your game and thoroughly looking through the results to get as much information about how your game is running as possible.

 

android_debug_bridge

Android Debug Bridge

While profiling in the editor is pretty useful, it doesn’t tell us much – of course our game will be fast on a great big computer, but how does it run on a crappy phone?

The is where ADB, or the Android Debug Bridge, comes in. ADB allows your computer to communicate with your Android phone about all sorts of stuff. Specifically (for our use cases), it allows you to profile your game while it’s running on a device. If you plug your phone into your computer, build the game directly to your phone, and open the profiler, you should see some results. This is the information we want, because it tells a much truer story about how your game runs on a phone.

Where Shadows Slumber, for instance, runs at ~200 fps in the Unity editor. When I plug my phone (the Google Pixel 2) into the profile, I get a framerate of ~60 fps. This is pretty good, so I know our game can run on newer devices. However, when I plug in my old phone (a broken HTC One M8), I get closer to ~12 fps. Looking at the profile during this run will give me much more useful information about what I should fix, since this is the device where performance is actually suffering. If you’re making any big decisions or changes based on profiler results, make sure those results come from your actual targeted device, and not just from the editor.

ADB usually comes with the Android SDK – if you have the Android SDK set up with Unity (which allows you to build to Android devices), then you should be able to use ADB with the profiler pretty painlessly.

I should also mention that there might be an equivalent tool for iOS debugging, but, as I do all of my development on a Windows machine, and all of my testing on an Android phone, I wouldn’t know what it is. Sorry!

 

4-24-Header

Frame Debugger

The next most important tool for rendering performance is the Frame Debugger (Window -> Frame Debugger). While the Profiler tells us a lot about what’s happening during rendering as a whole, it still treats the rendering process as a black box, not letting us see what’s actually happening. The is where the Frame Debugger comes in – it allows us to see, step by step, exactly what the GPU is doing to render our scene.

As I mentioned last week, the GPU renders the scene through a bunch of draw calls. The Frame Debugger allows us to see what each of those draw calls is drawing. This allows us to determine which materials/shaders are causing the most draw calls, which is one of the biggest contributors to rendering lag. It also provides a bunch of information about each draw call, such as the properties passed to the shader or geometry details. The important thing that it tells you is why this draw call wasn’t batched with the previous draw call.

frame debugger

All of this happens in a single frame

Batching is Unity’s first defense against rendering lag, so it makes sense to batch as much stuff into a single draw call as possible. Because rendering is such a complex process, there are a lot of reasons why draw calls can’t be batched together – certain rendering components simply can’t be batched, meshes with too many vertices or negative scaling can’t be batched, etc. The frame debugger will tell you why each draw call isn’t batched with the previous one, so you can determine if there are any changes you can make that might reduce the number of draw calls, thereby improving rendering performance.

For example, in Where Shadows Slumber, we re-use meshes in certain places. Sometimes, if we require a “mirrored” look we’ll reuse a mesh, and then set the scale to -1. This was before we really looked into rendering performance, and, unfortunately, it causes problems – a mesh with negative scaling can’t be batched with a mesh with positive scaling, so this ends up creating multiple draw calls. Rather than setting the scale of the object to -1, we simply import a new, mirrored mesh and update the object, allowing these draw calls to be batched and improving performance.

 

4-24-Stats.JPG

 

Stats

That’s it for the heavy-hitters; between the Profiler, Frame Debugger, and ADB, you should be able to get a pretty good idea of what’s going on in render-land. Unfortunately, digging through them can take a while – sometimes you just want a quick indicator of what’s going on in your scene. Enter the Stats window.

The Stats window (click “Stats” in the Game View) is a small overlay in the game view which gives you a quick rundown of various rendering indicators in real time. It’s not as in-depth, but it gives a much quicker picture of performance.

stats

That’s a lot of batches!

While it sounds like the stats window doesn’t add much – after all, the Profiler can give you the same information – I’ve found it to be very useful. The Profiler is probably better when you’re actively debugging rendering performance, but the stats window allows you to notice places where rendering performance might take a hit, even when you’re doing other things.

When I’m testing some other part of the game on my computer, I’m not going to notice any rendering lag, because my computer is so much more powerful than a phone. I’m also not going to be looking at the Profiler or Frame Debugger, because I’m not worrying about rendering at the moment. However, if I have the stats window open and I notice that the number of draw calls is in the hundreds, then I know something is going on. At that point I can get out the Profiler and see what’s happening – but I wouldn’t even have known there was anything amiss if it weren’t for the stats window.

 

4-24-SceneView.JPG

Scene View Draw Mode

As we get further and further down the list, we’re moving from “debugging all-star” to “it’s useful, but you probably won’t use it much”. Scene View Draw Modes fall into this category, but they’re still good to know about. You can access different Scene View Draw Modes by clicking the drop down menu at the top right of the scene view window.

The Scene View in Unity is one of the main windows that you use to make your game – it shows everything in the scene, allowing you to move around through the scene and select, move, rotate, scale, etc., any game objects. Usually the Scene View just displays the objects exactly as they would be displayed in the game. However, it has a bunch of other modes, and some of them are actually pretty useful. The two that I find the most useful when considering rendering concerns are listed below, although they’re all worth checking out:

Shaded Wireframe: This is my default draw mode, as it looks pretty similar to the normal shaded mode. The difference is that it also shows all of the triangles and vertices that you’re drawing. This is useful because certain shader operations are performed once for every vertex. Decreasing the number of vertices in your scene can give you a bit of a performance boost, and the shaded wireframe draw mode helps you see when you might have too many vertices.

3-4toomanytris

The shaded wireframe shows that there are too many polys.

Overdraw: This mode draws each object as a single transparent color. This makes it very easy to see when multiple objects are being drawn in the same spot on the screen. Since the GPU has to draw every pixel of each object (even if that pixel will be overwritten later), it ends up wasting some calculations. Areas that are very bright will waste even more calculations. Switching to this draw mode every so often lets you know if there are any places where you might want to remove some meshes.

 

161004-worst-hacks-history-feaure

The Internet!

It should pretty much go without saying, but one of your best resources for debugging performance is the internet. Unfortunately, when it comes to rendering in Unity, the information out there is pretty scarce. Unlike with normal imperative coding, where you can simply Google “how to pathfinding” and get 30 implementations, you have to work a bit harder with rendering stuff. I find it’s best to do what you can and only resort to the internet with very specific questions. That said, there is still a lot of helpful information out there. You just have to know going in that only one of every three stack overflow questions makes any sense, and only one of every four Unity forum threads are using the most recent APIs. It’s like “Googling: Nightmare Mode”!

For anyone reading this post who is actually working on rendering stuff – I’m very, very sorry. I hope that this post and the tools I discussed help to shed at least a little bit of light in the dark underworld that is shader-land, and I hope you can achieve your rendering goals and make it back to the mortal realm before your soul is forever lost.

For everyone else who hasn’t done any rendering stuff, I hope you learned a bit, and that maybe I inspired you to get involved with some rendering code! It’s really not that bad, I promise!

 

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

If you didn’t already have a working knowledge of rendering, I hope this post helped! If you do know about rendering stuff, I hope you don’t hate me too much for my imprecision! You can always find out more about our game at WhereShadowsSlumber.com, find us on Twitter (@GameRevenant), Facebookitch.io, or Twitch, join the Game Revenant Discord, and feel free to email us directly with any questions or feedback at contact@GameRevenant.com.

Jack Kelly is the head developer and designer for Where Shadows Slumber.