How Cinematics are Made in Sunderfolk

[p][/p][p]By: Neo Zhang[/p][p][/p][p]Hi there! I’m Neo, a Game Designer on Sunderfolk. You might’ve seen some of my work on monster, encounter, or hero design, but today, I want to share a behind-the-scenes look at Sunderfolk’s cinematics. These were all created in collaboration with our awesome animation, 3D and VFX team too. Here’s a quick guide on how Sunderfolk’s cinematics came to life![/p][p]How It Began[/p][p]Originally, it was unclear whether Sunderfolk would include cinematics. However, shortly after I joined the team (due to my background in game design and film) I was tasked to explore whether we could create a quick, effective cinematic using only the gameplay assets we had at the time.[/p][p]I put together a rough cut of what became our first cinematic “Bug Rollout” which ended up as the final cinematic for the Act 1 mission, Tower Defense. Since then, we got a dedicated budget for cinematics! While a few received high-quality custom animation to really deliver the narrative quality we wanted, the majority of them are still made entirely with gameplay animation assets, using the same approach on Bug Rollout. Here’s how we do it![/p][p][/p][p]Step 1: The Story[/p][p]The first step is understanding the narrative we want to create for our players. In Tower Defense, the setup is simple: Monsters are attacking Arden, and as the Hero, you join the fearless (and adorable) Guard Bugs to defend the city's last line of defense: the Gate.[/p][p][/p][p]From there, I normally like to identify three key story beats that not only highlight the stakes but also set up what players are about to face in the mission:[/p]

1. [p]Monsters attacking the Gate[/p]
   1. [p]A great chance to showcase the enemy lineup the player will be up against.[/p]
2. [p]The Guard Bugs stepping up to protect Arden[/p]
   1. [p]This sets the tone for the type of mission: a defense scenario.[/p]
3. [p]The first Defense-type mission in the campaign[/p]
   1. [p]It’s a new encounter style for the player at this point of the game[/p]

[p]Step 2: Research and Brainstorm[/p][p]This cinematic falls under our “Low Budget” category, which means the goal is to reuse as many existing assets as possible. So the next step is checking what animation we already have! Luckily, when I joined the team, most of our characters already had their animations rendered and ingested, so I had a clear idea of what I could work with from the start. Another important consideration is understanding where the cinematic will play and how to create a seamless transition between the cutscene and gameplay.[/p][p]Scouting[/p][p]First, I scout the environment to find camera angles that effectively tell the story. I also am careful to avoid unfinished areas or requesting new geometry solely for the cinematic.[/p][p]Rampager[/p][p]I found this great fidget animation* where the Rampager beats its chest and lets out a loud scream. Perfect! It instantly sells the idea that this monster is a serious threat, and reinforces that Arden is in real danger. The Rampager is the strongest enemy the player has faced so far, so great plus.[/p][p]I also noticed that the landing frames in its attack animation felt really powerful and weighty, definitely something I could use to add impact to the scene.[/p][p][/p][p][/p][p]*Fidget Animation = A subtle movement animation added during a character’s idle that conveys a sense of liveliness, rather than feeling completely still.[/p][p]Guard Bugs[/p][p]We’ve got four different types of Guard Bugs, and I imagined them working together like a Power Rangers-style team. Since they all share the same rig and animation files, it makes things a bit easier, but also challenging.[/p][p]One animation in particular stood out: an attack animation that includes a few frames of the bug rolling. Perfect! I pictured the final bug rolling out of the gate and joining the team, a small moment that helps sell their unity and heroism.[/p][p][/p][p][/p][p]Step 3: Storyboard[/p][p]Now that I got the bits and pieces to the story, it’s time to stitch them together into a storyboard. (Note: I’m not one of the artists on the team for a reason, so please don’t judge my drawing skills too harshly, lol.)[/p][p][/p][p]In my head, I pictured the Monsters launching a surprise attack on Arden, and in response, the Guard Bugs marching out of the gate, heroically, but with a touch of cuteness. As the final bug rolls out and joins the formation, they stand together like a squad of mighty Power Rangers, ready to defend Arden with everything they’ve got; which leaves a good impression and transitions to the actual gameplay.[/p][p]Step 4: Building the First Draft[/p][p]Next, I go into the engine and build the Timeline. It doesn’t need to be perfect at this stage; the goal is to test whether the cinematic works and if it hits the three key beats I outlined earlier.[/p][previewyoutube][/previewyoutube][p]Good so far. It’s turning out really great![/p][p]Step 5: Feedback and Iteration[/p][p]With the draft ready, it’s time to share it with the team and get their initial feedback. The number of iterations varies, but for Bug Rollout, the responses were pretty positive! I received helpful notes on timing, ideas for hiding parts of the scene we don’t want players to see, alternative ideas to reduce scope and budget, and suggestions for improvement. Big shout out to Alvin (Animation Lead), Scott (3D Lead), and Matt (VFX Lead) who all played crucial collaboration throughout the development.[/p][p]After a few more rounds of iteration, the final call to wrap it up and hand it off to other talented team members for final animation, lighting, VFX, and audio polish. And just like that, the Tower Defense cinematic, Bug Rollout, was officially complete![/p][previewyoutube][/previewyoutube][p]Of course, a few cinematics had bigger budgets for custom animation, usually for pivotal story moments or when extra polish was needed. The process mostly stays the same, with some added steps where I chip in with reviewing and feedback, but that’s a story for another time![/p][p]Conclusion[/p][p]And that’s how the majority of our cinematics come to life! With careful planning, creative problem-solving, and great cross-team collaboration, we managed to create 30 cinematics within 8 months for our first studio game![/p][p]As we wrap up, here are a few more examples of cinematics made entirely with gameplay assets, plus one that didn’t make the final cut, but was too good not to share! Thanks so much for reading, and enjoy Sunderfolk![/p][p]- Neo Zhang[/p][p]Cinematic: Beetle Cage[/p][p][/p][previewyoutube][/previewyoutube][previewyoutube][/previewyoutube][p]Cinematic: Spider Intro[/p][p][/p][previewyoutube][/previewyoutube][previewyoutube][/previewyoutube][p]Cut Cinematic: Brave Chirp[/p][p][/p][previewyoutube][/previewyoutube][p]Thank you! [/p][p]-End- [/p]