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.

Join Us At Play NYC 2018!

The team behind Where Shadows Slumber is thrilled to announce that we’ll be returning to Play NYC this weekend (Saturday August 11th and Sunday August 12th) for its second year in operation. Play NYC is a massive game convention that takes place right in the heart of Manhattan, and welcomes game developers from all around the Tri-State area to show off their work.

Play NYC has grown a lot over the past year – the event will now be held at The Manhattan Center, and over 100 exhibitors are expected to showcase 140+ games over the course of the weekend. However, one thing has not changed: though Play NYC 2018 is only in its sophomore year, it has quickly become New York City’s premiere indie game event. We can’t wait to meet more fans and show you how far the game has come!

If you haven’t purchased tickets yet, hurry up and buy them! Note that you can only pick up tickets for a portion of each day, not an entire day. Since Play NYC isn’t a 4-day event like PAX East, Playcrafting decided to split each day into 5-hour chunks of time to simulate the 4-day experience.

As developers, we love that. There probably won’t be any slumps during this weekend at all. Generally at these conventions, there are periods where the attendees have seen everything they are interested in, and you have a good hour or two with no foot traffic. I don’t think that will be a problem! I’m not sure how the public will react to this setup, but I hope attendees enjoy the show regardless. Personally, I think 5 hours should be plenty of time if you are coming to Play NYC for the first time and you just want to see what it’s all about.

 

Image-6 Exhibitor Ad.jpg

Play NYC In The News

Many prominent journalists are covering Play NYC, which is another thing Jack and I find so appealing about the show. The event itself is a big deal, which means it should attract even more journalists who want to write about underground games made by independent teams.

Here’s a few links to some articles about the event:

We got a shout-out in TechRaptor’s promotional Play NYC article.

The New York Times wrote an article about the difficulties game developers face in NYC.

The New York Times also created a list of 12 cool games made in NYC.

Variety wrote about Play NYC’s efforts to highlight immigrant developers.

I hope those articles whetted your appetite, and you’re looking for more. (Too bad we didn’t get into that list of 12 cool games… I guess Hoboken doesn’t count as NYC!) If you came to Play NYC last year, you already know how awesome it is going to be. We hope to see you there.

 

Play-NYC-2018_Main-Floor.jpg

Come See Us!

If you take a look at the image above, you’ll find us on the top-right in teal. Booth 22 (Game Revenant) is us! If you read this blog regularly, please come visit us and say hi [^_^] We may even whisper the release date in your ear and force you to swear a vow of silence…

This will likely be our final event before the game launches to the wider public on iOS globally, so it’s going to be our swan song to development. This is the calm before the storm. That also means that if you want to show Where Shadows Slumber to a friend before it releases so you can score cool friend who knows about indie stuff points, you better bring them to our booth!

Of course, if you can’t make it to the event, you can always watch the Twitch stream!

 

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

We hope to see you at PLAY NYC 2018! 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.

 

 

Going Gold

We’ve come to the part of the development cycle that no artist ever enjoys: the gold-stamping process. What is this mysterious “gold-stamping?” Why do artists despise it so? You thought it was just fixing bugs and making small tweaks, didn’t you? Well, read on to find out…

 

You’re reading the development blog for Where Shadows Slumber, a puzzle game coming to iOS and Android later this year. Check out our free Demo here.


 

 

LevelProgress.JPG

Gold Stamping: The Point of No Return

Every project must come to an end eventually. In order to make sure your game is ready for the whole world to see, every piece of it must be tested individually. Then, the entire game has to be tested as one unit. Before we can move on to that final testing phase, every Level, Cutscene, and Menu in the game needs to be approved by three teams: Art, Sound, and Development.

The Art team is just me – and the Development team is just Jack. Alba and Noah work on Sound together. That means we need three approvals for each Level, Cutscene and Menu. Approval means “I’m done working on this Level forever – there is absolutely nothing left to do. Put it in the game.” (See the screenshot above for a look at our spreadsheet that has each Level listed as well as the “Gold” stamps)

There’s a specific order we have to do this in, as well. I need to put my “Gold Stamp of Approval” on Levels before Sound does, because I’m in charge of the game’s visuals. If I add a blazing torch to a Level after Sound has “gold-stamped” that Level, they’ll need to come back and give that torch some kind of looping audio. Art and Sound need to gold-stamp the Level before Jack takes over, because he’s duplicating each Level in the game into a separate file and running an optimization process on that Level.

This optimization process takes time, and destroys the editability of the scene. (By way of analogy, consider what happens to a Photoshop file when you Flatten it into a JPG file. The JPG takes up less space on your computer, but you lose the editable Layers from Photoshop) Jack is able to lower the time it takes your phone to render a frame of the game by “crunching” these Levels. If your phone can render a frame faster, the game will feel smoother. Players hate lag more than they hate bad graphics or design, because it interrupts the flow of play. Everything we’re doing now is to make the game run smoothly even on older devices.

But you can see the problem: if Art or Sound has to tell Jack that they made changes to a Level, one of two things happen:

(a) We need to make that change in both the original Scene and the crunched Scene

(b) OR… Jack needs to start the optimization process for that Scene over again

Option A introduces the possibility of human error. Have you ever made a mistake copying something down by hand over to another sheet of paper? Imagine that with a bunch of tiny numbers and sliders in Unity! Unfortunately, Option B wastes time we don’t have. And since “crunching” makes these Levels unable to easily edit, there is no Option C.

In the late stages of the project, we’re in a mad dash to finish each Level and hand them off to Jack. We’re a bit on top of each other at the moment, and tensions are high. Some of our beloved changes won’t make it into the first release of the game and may have to be stealthily added as a patch later on. (Shhhh don’t tell anyone I said that, blog reader)

Those are all the downsides of gold-stamping. Enough complaining: let’s talk about why this process makes the game so much better!

 

HowEmbarrassing.png

iPhone X Stretching

We began working on this game long before the iPhone X was announced. Since we designed the game in portrait mode, we planned for it to work in 9:16 resolutions as well as 3:4 resolutions. The plan was simple: we would assume you had the tiniest screen there was (9:16) and make sure you could solve the puzzle using everything you saw. And then, if you had a large screen, your screen would show more of the artwork surrounding the puzzle… but not any more key information. (Our demo works this way. Download it for free on a few devices to see what I mean.)

The iPhone X dashed our hopes when it launched, since it has a very thin and tall screen. When we booted it up on an iPhone X earlier this year for the first time, we noticed that key puzzle information was being cut off! Furthermore, there were sections above and below the Scene that I never planned for human eyes to see. We had to fill those sections in with art, or iPhone X users would know the game wasn’t made for them.

Here’s another analogy: imagine if you were designing the set for a Broadway musical. You do all your work, and then a week before opening night your director comes to you and says: “Listen, we’re lowering the stage by 2 feet and extending the ceiling by 2 feet above the stage. Do you think your set will still look good?”

The correct answer is: “yes, but I need to extend the artwork so it doesn’t cut off!” It’s ok if your art bleeds over into a section that human eyes will never see. But you can’t have your screen bleed over into artwork that isn’t finished or cuts off arbitrarily!

Fortunately, Jack solved our width problem by writing a Camera Resizing script that adjusts the Orthographic camera size to the proper width depending on your hardware. (Thank God for Jack, lol. Just that script alone would take me the full 3 years we spent working on this game to complete) I am solving our height problem by extending the shadowy silhouettes on each Level where appropriate, and adding more art where it’s necessary.

 

TooManyVerts.JPG

Low Poly Means Low Poly

When you set out to make a low-poly game, you aren’t just deciding on an art style. You’re also setting boundaries for how much the game will need to handle. This is why you’ll see a lot of cartoony artwork on mobile games and MMOs. Both of those are situations where you want the game to run on low end devices like old phones (mobile games) or old computers (MMOs). Cartoony graphics let you show what you want without having high-resolution textures or incredibly detailed model topology. It isn’t just an artistic decision – it’s also a marketing, business, and programming decision.

However, just because I said that I would do low-poly art doesn’t mean I kept my promise. There are a lot of Levels that go wildly above our Triangle / Vertex budget. (See the screenshot above, with emphasis on the Tris and Verts) Unity counts the number of Tris and Verts that are displaying on the screen at one time. Jack wants us to be well under 100k of each. That may sound like a high number, but you’d be surprised by how even simple scenes can skyrocket to 150k. When he finds Levels that are egregiously “over-budget,” he sends them over to me so I can make reductions.

Fortunately, Tri / Vert budgets are not like monetary budgets. If Jack told me not to spend $100,000 dollars, and then I bought a yacht, we’d be $100K in the hole. (But, we’d have a boat. Jack, I urge you to reconsider this proposal.) With polygons, as long as I cut down on fatty models before the game launches, no one will ever know. Except for the readers of this blog, of course. But you’re sworn to secrecy! Don’t share this post.

There is one more thing about this I discovered: Unity’s lighting system counts polygons in a very strange way. You can’t always trust their readout. I discovered that multiple lights require Unity to count the same object multiple times. If a cube has 8 Verts and one light is lighting it up, Unity will show 8 Verts. If there are six lights on it, Unity will show 48 Verts. So there’s some Levels that Jack will reduce once he does his big crunch, since he rewrote how our Lights will work to make them all act as one super-Light. (More wizardry, I’m sure.)

We’re doing all we can to make the game run fast on your phone. If it’s still lagging, get a new phone!

 

TextureAtlas.png

File Formats and Compression

This is the kind of boring stuff that puts artists to sleep, but it’s important. Unity imports textures, models, and audio files according to a standard. You can set the standard somewhere, but we never did. Instead, I am going through every file in the game and asking the had question: does this really need to be as large as it is?

The answer is usually “no!” which is good. I’m crunching a lot of textures down from 1024 x 1024 to 32 x 32 pixels, Unity’s smallest maximum size for images. Noah and Alba also did a bunch of audio crunching that I can’t really explain properly. You’ll have to wait for their revealing tell-all novella (Where Shadows Is Grongus: Nightmare Stories From Development Hell) for all the juicy secrets!

One more thing about textures: it might not be super necessary for me to make these textures smaller after all. Jack is actually doing this crazy optimization thing where we have every texture on one big image called a Texture Atlas. This image is as small as I can make it and has every texture in it laid out like a grid. We have one of these for every Scene in the game (Levels and Cutscenes) and when the game wants to render an object that uses a texture, it’s going to go to this image and pick from the proper coordinates.

This is insane and Jack explained it to me once and it’s insane and I’m sure it will make the game run super fast. If I’m remembering correctly, Jack told me that the rendering system needs to pause and switch gears every time it has to render a new Material. (So if the grass is GreenMaterial and the tree is TreeMaterial, the renderer needs to pause and switch) If it never has to switch like that, the rendering process should go way faster. The way to do that is to make one Material with the Level specific Texture Atlas called “Scene-0-2-Atlas” or something and put that on each object with the right coordinates. We’ll have fewer batches to render, and you’ll never even know what’s going on under the hood!

I’m going to stop giving the layman’s explanation here before I embarrass myself by showing my limited knowledge. But look forward to Jack’s upcoming tell-all blogella (Life With Frank: The Man Who Knew Nothing) for all the juicy secrets!

 

rubber stamp APPROVED

See You In Hell

This is going to be a rough week. This lengthy process is taking longer than I would have liked, and I’ve been pulled away from animating the final cutscenes. I desperately want to get back on track so Alba and Noah have enough time to work on the audio score for the final cutscenes.

Thanks for reading this blog post – I have to get back to gold-stamping!

 

 

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

We hope you enjoyed this update about the game’s development. 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 – July 2018

Welcome to the State Of The Art, July 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.

Before we reach the spoiler part of the article, I’ll give you a brief update about the state of the art, and how much work is remaining on the aesthetic side of things. There will be no pictures, GIFs, videos, or bulleted lists, so don’t worry about seeing spoilers! (Just don’t scroll down too fast. You’ve been warned!)

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

 


Spoiler-Free Progress Report

When June began, 5 out of 10 cutscenes were animated and World 7 was less than half complete.

As of July 3rd, 7 out of the game’s 10 cutscenes have been fully animated and World 7 is finished! (There’s a tiny amount of work remaining for these two cutscenes, but cut me some slack here) I also did something I don’t normally do and programmed the cutscenes to have a pause menu where you can skip the cutscenes. Does that count as “art?”

What’s next: Later today, I’ll finish the two cutscenes that are nearly complete. This month will then be dedicated to finishing the final 3 cutscenes and putting the finishing touches on the game’s artwork.

You’re all caught up. Now, if you want a sneak peek at some of the artwork I did this month, read on… but beware of game spoilers!

 

 

 


SPOILER WARNING: The rest of this article 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!


 

 

 

 

 

 

 

World-7-Header.JPG

Paradise is Complete

My work on World 7 is officially done! It took longer than I would have liked, but the Levels came out great and it will serve as a proper final sendoff for those who complete the game. Here are the full screenshots from the three Levels I had to finish:

SOTA-7-3.png

SOTA-7-4.png

SOTA-7-5.png

There will still be GitHub Issues to address in these Levels, so I’m not completely done. However, the same is true of every Level in the game at this point, so it doesn’t matter! I hope you like the look of these Levels. Since you’ve journeyed into spoiler-land, you may as well tell me what you think in the comments below!

 

 

Header-King.JPG

Two More Cutscenes Are (Nearly) Complete

Once I finished World 7 about halfway through June, I moved on to two more cutscenes. I do these chronologically, so check out last month’s blog if you’re trying to piece the story together through short GIFs. Here are some teasers from these cutscenes:

 

Cutscene-Short-Leopard.gif

Obe runs into an old friend on his way out of the Aqueduct…

Cutscene-Short-King.gif

“Can I interest you in a golden circle, by any chance?”

At the beginning of this month, I had a long sound recording session with Alba and Noah. You can read all about it here. The short version of the story is that we recorded voices for all of the characters that “speak” in cutscenes. (By speak, I mean “loud unintelligible grunting”) For the past month, they’ve been working on implementing those into the game, so the cutscenes I completed in May are going to have finished audio soon.

 

 

WilliamChyr.JPG

Back to Work

Sadly, this blog post reveals that I didn’t get as much done in June as I’d hoped. Because World 7 took a long time to finish, that delayed my progress on the cutscenes. Being behind schedule is a slippery slope!

As soon as I finish this post, it’s back to work finishing those two cutscenes I mentioned. I’ll record them and send them off to our audio team for scoring. Then, there are three more cutscenes that need my love – and one includes a full credits sequence that may just be too ambitious to put into the game. I’ll also need to take some time just to address the mountain of GitHub Issues that Jack logged as he played through the entire game. Some Levels require artistic changes to make the shadows look better. I can save those for later, but we’re running low on “later” – and I don’t want his progress to be stopped because I couldn’t take a break from cutscenes for an hour to read all these emails. Finally, there is a Level Select screen for World 7 with my name on it. Those tableaus are beautiful but each one takes a few hours to complete.

The tweet above, from William Chyr of Manifold Garden fame, is appropriate. I always expected the end of development to feel like less and less work as we neared our goal, but it’s the opposite! There is so much to do, and so little time.

Back to work!

 

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

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.

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.