OASIS Diaries #2: From Sprite Sheets to Spine Animation

ProjectOasis
4 min readMay 11, 2022

Greetings Natives!

Welcome back to the second installment of OASIS Diaries!

We’re diving right into character design and animation this week. Walk with us as we take a look at the progression of our character animation.

In the Beginning There Were Sprite Sheets

When we first started Oasis, our initial goal was to achieve swift development and implementation of the game in order to determine its viability.

We went with the best option that made sense at that stage, 2D sprite sheets. It was quick, efficient, and easy to start off with. We used a base pack of assets with some modifications of our own. This included assets for game icons, character sprites, tilesets, GUI and more.

2D sprite sheet for a farmer NPC in Oasis

A sprite sheet is essentially a series of images that shows a frame-by-frame animation sequence in a tiled grid arrangement.

One major drawback to using sprite sheets, however. Every animation sequence requires multiple static images in incremental frames to be created.

One set of images for walking, another set for the idle animation, one more for attacking. Multiply that with hundreds and thousands of different character sprites (our Oasis Attributed NFTs and 10,000 Monsta Party NFTs) and this would pose issues in terms of long-term scalability.

Enter Spine, 2D Skeletal Animation Software

Thus, we made the switch to Spine, which uses bone-based animation for 2D video games.

Animation in Spine works like this — we create ‘skeletons’ by attaching bones to an image, then we animate the bones. This is known as skeletal or cutout animation, which is better than frame-by-frame animation in several ways.

(Note: We are not affiliated to, or endorsed by Spine in any way)

Skeletal animation in Spine

Better Scalability, More Efficient Workflow

Fewer art assets are required, as we no longer need to create multiple images for each animation. Big scale changes for a large amount of character designs can be easily done within a shorter time. The workflow is also more efficient, which leads to faster deployment.

Smoother, More Natural-Looking Movements

With sprite sheet animations, the smoothness of an animation depends on the number of frames created for an animation sequence. No such limitation with Spine. The image “skin” only has to follow the movement of the skeletal animation, giving us fluid animations without needing additional time or resources.

Along with our switch to Spine, we’re doing a major redesign of all our graphics to feature a higher resolution, up to 1.5 times greater pixel density compared to the original.

Old vs new character animations

We can also achieve smoother transitions between two animations. A character jumping mid-run will be a blend between the run animation and jump animation, giving it a more natural look.

Jump for joy, Oasis boy!

One Base Skeleton Animation to Swap ’Em All

Using skins in Spine let’s us reuse the same base skeleton animation for different character designs. All we need to do is just swap the skin.

Want more NFT designs? No, problem. How about more NPCs, monsters, creatures, plants, etc. Sure, why not? Weapons and cosmetics for your character avatar? Yup, we’ve got those lined up too.

Design & cosmetics possibilities are much easier to implement

It’s also easier for us to add different types of animations — back-facing, jumping, attacking, talking. The possibilities are endless!

(Hint: this will be important for our upcoming PVE content)

Battle maid, ready for action!

The Future is… Sandbox?

We are also exploring the possibility of building an engine which will allow others, such as partners integrating to our world to create their own characters and even animations to bring their NFTs straight into Oasis.

This will be a step in the direction towards sandbox driven content. We envision a future where Natives could create their own characters, animations, buildings and more.

Are We There Yet?

TL;DR — New animations, new design. Coming this quarter.

--

--