I've been so excited to show these off.
Available now in Canada and the USA.
iOS App Store: https://apps.apple.com/us/app/wordcation/id1501855203
Android Google Play: https://play.google.com/store/apps/details?id=com.exceptionullgames.wordcation
Given our success using Spine to make characters for our previous Punch-Out-like game (http://esotericsoftware.com/forum/Made-99-9-in-Spine-Election-Year-Knockout-12569), we decided to give our artist Alex Linné a challenge that would really let her stretch her excellent painterly skills. She had previously done background work for Knockout, and had taken on much of the game's character animation, so adding Spine to her background painting workflow was an exciting prospect.
Wordcation is a multiplayer crossword game that demands concentration and lends itself to calming, awe-inspiring vistas. Many games like it have tried to achieve this through stock photography and simple screen effects, but what Alex has managed to pull off here is on a whole new level. Her artwork, as well as the addition of real-time fully synchronous cooperative multiplayer, truly makes this THE definitive game in its genre.
More importantly, it wouldn't be possible without Spine. Esoteric Software's animation engine gives us a massive leg-up on our competitors, allowing us to create amazing and immersive environments while barely using any battery power. Our game can run at higher framerates, on more devices, and for longer than other games - something that is extremely important for a game that asks you to sit and think on the puzzles in front of you.
Allow me take you through my favorite levels from the game and let you in on some of our secrets. For a single person to produce this much animated content in such short time requires a lot of artistic shorthand and highly technical tricks that I think you'll find interesting.
SPOKANE
This was our first and probably the simplest background to create, and it's our favorite because we live here. Inspired by 8-bit-era palette shifting artists like Mark Ferrari (http://www.effectgames.com/demos/canvascycle/), the goal was to create several overlapping loops that could play on top of one another without ever letting the player identify the seams between them.
How often do you get to see a waterfall from this side? This river runs through the center of the city itself, and you can peer right over the falls. Alex used several layers to speed up the water as it approaches the edge. The edge itself is composed of two ripple planes sliding back and forth.
The subtle particle effects were fun to make. Alex spent a lot of time on particles, mist, and atmospheric occlusion throughout the project. They really give you a sense of place within the scene. We hope in the future that Spine gets more tools for masks and particle effects, given how important they ended up being.
SEATTLE
Alex chose to showcase the giant ferris wheel in Seattle as it provides a soothing tick-tock rhythm to the otherwise visually-noisy Puget Sound environment, heavy as it is with drizzling rain and fog. This ferris wheel is made possible by Spine's rigging system which allows us to spin the body of the wheel while attaching the buckets to it in such a way that they always face the direction of gravity.
The rain was tricky, as we only had so much texture space. Two layers of rain with different animation lengths were enough to hide any obvious looping, but four layers of fog had to be added to complete the atmosphere. We didn't do it here, but if you need to reclaim memory on these kinds of textures, you can shrink them in one or both axes and stretch them back out in Spine. You can see us do exactly this in other levels if you look closely.
The water is also a complex illusion. Unlike Spokane, this body of water is made of multiple transparency layers that she animated in and out to form ripples and patterns. You can also see the reflection of the buildings in it, set as a pre-blurred texture below the waves. These kinds of overlapping opacity effects can be very costly in other animation engines, but Spine powers through them with ease.
OREGON COAST
This one is subtle, but it's really pretty. Wind pushes the flowers in the foreground as well as the clouds in the distance while waves break against the rocks.
The foreground field of grass is deceptively complex on account of the flat colors in use. Lots of layers of plantlife fill the space and overlap the shadow layers on the ground. She then staggered each animation set to simulate the way wind blows along the field.
The waves were a little simpler. Large sprites scale, skew, and fade as they swoop up the the rocks and recede. This is how a lot of 3D games still do this effect to this day. The more layers you can push and pull, the more convincing the effect will be.
SAN FRANCISCO
Alex really likes lighting effects in games. For San Fran, she wanted to have a street light in this scene, but she didn't want it to unnaturally light up the far distance behind it. This means large light shaft textures using blend modes weren't going to work. She ended up blurring a flattened portion of the background to act as the light shaft instead, leading to a more realistic and moodier render.
I also want to draw your attention to the shadows on the road. Stark sunset shadows often look like they fully combine, so to make the shadow of the tram more grounded she animated a mask that cuts out a completely separate lit version of the road as the tram passes.
LAS VEGAS
The fountain is composed of a LOT of animated masks. The masks are parented to bones to allow them to spin as they animate in and out. The water jets themselves are actually just complete circles of water that spin. To get the oval shape, they are parented to two bones that independently control scale and rotation. The masks then cut them off so you can start and stop the fountain. Particle effects at the water's surface hide the seams.
All of the lights are made of a single blurry dot. This was copied across spans of lights and animated, then the animation layers were staggered to create the rolling effect. Alex says she wanted more of them, but simply ran out of time. That's okay, though. Backgrounds aren't supposed to steal the show from the game UI anyway.
GRAND CANYON
This animation pushed the limits of Spine's timeline. Each animation piece was so long, the timeline didn't want to zoom out all the way. There are more technical ways to get around this limitation, but she powered through it in the traditional manner to save precious engineering time.
The scene changes from a sunny evening to a dry thunderstorm with lightning over the span of minutes. This is achieved by having a lit and unlit version of each rock structure, similar to San Francisco above. The lit rock fades away to reveal the dark rock while the sky layers blow through. Sunlight moves across the scene from background to foreground by fading the rock layers at different intervals. This is my absolute favorite location in the game.
DESTIN
So much water! This is an improved version of the technique used for Seattle. It has to be, as it is the focus of the scene. As usual, multiple transparent textures are weaved on top of one another to create the high frequency wave patterns. All of the reflections in the water are separate textures distorted by meshes.
Getting the color of the water just right was tricky. Destin's emerald waters are famous, but simply making green water would make it look dirty. The color is a very particular gradient behind all the transparency effects, and all of the transparency layers are carefully considered so as to not reduce the water's beautiful saturated quality.
ORLANDO
Alex said the thing she most remembers about Florida is the amount of wildlife everywhere. Sometimes you'll just have a random alligator wandering around! To capture this, she used her character animation skills from Knockout to place several animals in the foreground.
Each character is on a simple rig, and they animate independently to avoid the appearance of looping. For good measure, she applied a coarse mesh to the water to give it a little life too.
What do you think? There are several more of these to see as you play through the game with a friend. Let us know what other places you'd like to see in the game! This has been a very fun project, so we're bound to add more locations in future updates.
