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.

Summer Tour 2018!

The month of May is nearly 50% complete. Where does the time go? As we’ve been hard at work finishing Where Shadows Slumber for all of our patient fans, I’ve begun planning a summer tour of interesting game conventions. People always ask us if we have any shows coming up, so hopefully this blog post will serve as a good link I can toss at them. Note that none of these shows are confirmed yet – we’re just considering them. (Or, in the case of PAX, they are considering us!)

Maybe we’ll see you at some of these events?

 

 


 

 

 

https3a2f2fcdn-evbuc-com2fimages2f442174722f52294315602f12foriginal

Playcrafting’s Demo + Play Showcase (June 12th)

We’re considering signing up for Playcrafting’s free Demo + Play showcase next month as a way of getting some last-minute testing in on the game’s final few Levels. Since this event is free for developers, we wanted to mention it here in case anyone reading this blog is also a game developer. You should come to this! Playcrafting always does a great job with these free events. The fee for customers is really cheap, so you’ll meet a lot of large families and get the chance to test your games with players of all age groups and skill levels.

 

 

RockHall

Returning to Play NYC (August 11th – 12th)

Now that submissions are open for PLAY NYC, Jack and I will of course be applying again. I have a call scheduled with Dan Butchko, the CEO of Playcrafting, set for later this week. From his website:

“Play NYC is New York’s premiere dedicated game convention for creators and players alike. Featuring the latest releases from studios large and small, and from developers old and new, Play NYC celebrates every facet of gaming in a way that only the Big Apple can.”

Play NYC was a blast last year! They had their inaugural show at Terminal 5 in the city last August. I liked the trendy look of the space, but it was obvious that they were going to need more room for future shows. Now they’ve moved to the Manhattan Center for the next 3 years, which should give them plenty of room to grow. Jack and I are so excited to see Play NYC doing well. This might even save us money in the long term, because every convention within walking distance of Hoboken saves us an expensive cross-country trip to a place like California or Texas. Everyone in the Tri-State area should support Play NYC!

 

 

3z1a2219_hdr

PAX West (August 31st – September 3rd)

This was one of the first PAX events I ever went to, all the way back in 2015 for Mr. Game! PAX West is a super cool show in a really unique convention space in Seattle, WA. I’ve been to Seattle twice now, and I enjoyed it both times, although the city does have its obvious problems.

We’ve submitted our BETA build to the PAX 10. Every year, the PAX crew judges the games that have been submitted and chooses ten that they went to spotlight. (If you remember when we were part of the PAX East Indie Showcase, it’s a similar setup) Those selected get a free booth at the show, which makes the trip way more affordable for struggling young indies. I saw last year’s gallery and recognized a few friendly faces, notably Keyboard Sports and our friends at Tiny Bubbles. We definitely belong in the PAX 10, so I hope the judges like our BETA build! Jack and I would like to thank everyone who helped test it at SXSW and PAX East.

If you also want to be part of the PAX 10, you had better hurry. Submissions end TODAY!

 

 

PAX-AUS.JPG

PAX Australia 2018 (October 26th – 28th)

Yes, you read that correctly – we’ve thrown our hat in the ring for PAX Rising at PAX Australia (PAX AUS for short) because… well, why not? Submissions for PAX Rising were open, so I decided to fill out the form. The show is held every October in Melbourne, Victoria. Their mission statement:

“PAX Rising showcases engaging digital games developed by smaller teams. The folks at PAX believe these titles have a chance to rise above their modest beginnings, by growing as a company, establishing a fan base or pushing the industry.”

My wager here is that since a trip to Australia is so difficult, there won’t be much competition for the PAX Rising selection, meaning we have a better chance. But who can say for sure? The guidelines for PAX Rising are quite vague, so I have no idea if mobile games are even eligible. Whether or not we can go on this trip will also depend on if our game can generate the money to pay for the trip. So if you want us to go “down under” to PAX AUS, you better buy our game when it launches!

Check out a video of 2017’s PAX Rising stars on their YouTube channel here.

 

 

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

We hope to see you on the road! Let us know in the comments if you will be attending any of these events. 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.

 

The Triangle of Truth

Hello again, everyone! It’s Frank again. I know you are all eagerly reading our weekly updates to find out when the game will be finished, but this week you may be disappointed. Rather than announcing a launch date, I’m going to explain to everyone the project management principles behind why Where Shadows Slumber has had such a long development cycle. We’re going to discuss the Triangle of Truth!

 

 


 

 

triangle

The Triangle, Explained

The “Triangle” refers to a project management principle that has gone by many names, visualized in the image above. This diagram has been used to describe everything from project strategies and economic models to government healthcare systems and construction projects. It’s one of those mantras that just always seems to hold true, no matter the circumstances. When you are creating something, such as a mobile video game, you’d ideally like for it to be as good as possible for the cheapest cost and have a fast development cycle. Sadly, the edicts of being demand that you must sacrifice one side of the triangle to achieve the other two. As the desired two metrics increase, the sacrificed metric must decrease. Let’s define these bolded terms first, and then talk about Where Shadows Slumber.

Good: The product stands out among the crowd as something special. We want quality to be as high as possible.

Cheap: The cost incurred creating the product. (Not to be confused with the price a consumer pays for the final product) We want our cost to be as low as possible.

Fast: Time is money, so the sooner the project is done, the better. Life is short! We want our development cycle to be as short as possible.

When you see how Where Shadows Slumber lands on this diagram, everything will start to make sense.

 

We Chose “Good” and “Cheap”

Jack and I are two recent college graduates who teamed up together to make video games. The development of Where Shadows Slumber is not too dissimilar from the development of SkyRunner, our previous mobile game. We decided not to spend a truckload of money on the game, so that it could be as good as we can muster at the lowest personal cost. Essentially, we decided to spend time on the game rather than cash. This is because we have no money, so it was an easy decision.

That’s not to say that I’ve spent $0 on this game! It’s fair to say tens of thousands of dollars have gone toward the development of Where Shadows Slumber, easily. But our budget is a pittance compared to large indie studios and AAA development houses. The sides of the triangle have been chosen: we want a good game, and we can’t spend a lot of money, so we’ll just have to spend as long as it takes to get the job done.

What would Where Shadows Slumber look like if we sacrificed a different portion of the triangle? Let’s analyze where we are now, and then look at the others. Right now, we’re sacrificing time.

 

SACRIFICE: TIME  / /  GET: QUALITY, LOW COST

Time: We’ve been working on the game since the spring of 2015, and we’ll continue to work on it over the next few months. That’s a 3 year development cycle!

Cost: Game Revenant has spent ~$25,000 to pay our audio engineers, travel to conventions, and equipment. We work from our apartments and meet in coffee houses, so we don’t spend money on rent or utilities. Jack has a full-time job and I mooch off my generous, loving and forgiving family.

Quality: The game is superb, beautiful, and time-tested. We even created a free Demo that went through extensive user testing and has stood the test of time. This informed our approach to the final game, but it took a while to get to this point.

 

SACRIFICE: QUALITY  / /  GET: TIME, LOW COST

Quality: We always knew we wanted Where Shadows Slumber to be an awesome, premium mobile game. But if for some reason we decided to release a poorer quality version, we’d be done by now. What would happen if we sacrificed quality by having fewer puzzles, no meaningful story, and low-quality audio produced by Frank making noises with his mouth?

Time: We already created a rudimentary throwaway version back in 2015 when we first begun work on the game. We could have cut it off right there! Also, our Demo has been available for download since November 2016, so that gives you an idea of how much time we could have saved.

Cost: Obviously you don’t need to spend a lot of money if you don’t care about the final result. Jack and I could have just created a shorter, worse game and it only would have cost us a few app store developer fees (Apple, Google Play) and the cost of buying development devices for building and testing.

 

SACRIFICE: MONEY  / /  GET: QUALITY, FAST DEVELOPMENT

Cost: It is possible to get investors for indie games, either by getting a loan from the bank or by appealing to groups like Indie-Fund. Jack and I briefly considered this a year ago, but by that point we had put in so much of our own time, we felt like reaping the full benefits. (Remember – investors don’t give out money for free, they want a cut of the sales!) We could conceivably have gotten $500,000 – $1,000,000 to work on this game if we put our own money in and also got some investments. If we did…

Quality: Along with our personal efforts, we could have hired a small team of veteran developers to aid me and Jack. Veteran programmers would help Jack organize his code, and veteran artists would produce work superior to mine. With Jack and I to guide their efforts, we could take a management / visionary role and let the experts do the hard work. I think the quality would be the same it is now, but it would have gotten there faster. Speaking of which…

Time: My work would be cut in half if we paid an Animator / Character Gui* to handle all of the cutscenes and humanoid animation in the game. That would free me up to work purely on environments with Jack. On the development side, we could hire a full-time Quality Assurance Gui to test the game on various devices. A full-time Marketing Gui would handle our social media efforts, press relationships, and business travel. We could have also brought Alba and Noah into the fold a lot earlier, meaning most of their work would be done by now. Every gui we hire is another hat Jack and I don’t have to wear!

*Gui is a gender-neutral version of “guy” that we used to use in Off Center

 

2305701220_0fc3d01183_b

There Is Always A Drawback

It should be stated that when you sacrifice a portion of the triangle, you don’t get it back. There is always a cost. If you spend money, it’s gone. If you sacrifice quality, your game suffers. And if you spend three years working on a game, you suffer.

I’ve lived in isolation for a period of three years ( ! ), all the while neglecting personal relationships with friends and families, turned down jobs, rejected business opportunities, let my body grow fat, and forgone other personal life goals in order to work on Where Shadows Slumber for as many hours a day as possible. (Imagine my surprise when I discovered that women are not eager to date a man who spends 10 hours every day in front of a computer and rarely leaves the house. Shocker!)

Jack has been working his fingers to the bone every day at not one, but TWO tasks: his full-time work at a startup in NYC and his passion project Where Shadows Slumber. He’s written about this before on our blog, and I encourage you to read his past writing. I was particularly mortified at the mention of how he has to find small scraps of time throughout the day (30 minutes in the morning, 25 on the train, 45 between arriving home from work at night and making dinner) just to work on the game. I have no right to complain – in light of his sacrifice, my life is a breeze. What kind of person would lead their friend into this kind of a life?

I don’t mean to be dramatic, but the point of this blog post is that the toll is real. Choose your sides of the triangle carefully, because the side you scorn will stop at nothing to seek revenge.

 

MiyamotoQuote.png

Where Shadows Slumber: Eventually Good

Miyamoto’s famous quote that “a delayed game is eventually good, but a rushed game is forever bad” may not be true anymore in a world where games can be patched and DLC can be sold. In a world where software is now a service, rushed games might eventually become good, given time.

However, this is also an industry where you live and die by your first impressions. Users don’t ever return to write a second review, and journalists move from game to game quickly. Jack and I are making a sacrifice of time to ensure that Where Shadows Slumber makes a splash when it hits the market. We can’t spend money we don’t have, but we can always put in just a bit more work.

Are you a game developer, artist, musician, writer, or creator working on a passion project? Feel free to share this blog post with your friends and family, especially if they have ever asked you “gee, when are you going to be done with this darn thing?” Let me know what they say in the comments below!

 

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

This has been a project management blog from the creators of Where Shadows Slumber. Have a question about aesthetics that wasn’t mentioned here? You can find out more about our game at WhereShadowsSlumber.com, ask us on Twitter (@GameRevenant), Facebookitch.io, or Twitch, and feel free to email us directly at contact@GameRevenant.com.

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

State of the Art – May 2018

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

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

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

 

 

 


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


 

 

 

 

LevelSelect-5-6.gif

More Gorgeous Menus

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

 

SOTA-April-Hills

The Rainswept Hills

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

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

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

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

 

SOTA-April-Header

The Forgotten Castle at the Summit

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

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

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

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

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

 

SOTA-April-Cutscene.JPG

Next Up: Cutscenes, Cutscenes, Cutscenes

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

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

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

 

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

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

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