thoughts, stories and ideas

Paying attention to detail, in my opinion, is one of the key elements for success.

Those little things that most individuals would say are unnecessary, or a waste of time, but when they're all added up, make the user interface more appealing, and delightful.

Well created animations require a lot of tweaking to get it 'just right.'

It's important to match the animation with the sound, choose correct easing curve, duration, and in the end, everything should be logical.

When you get all the variables right, it will result in a beautiful animation that gives the user a dopamine rush, feeling like he has succeeded.

"Few things are more delightful in a digital product than well-designed animations. They make us grin, and they help us understand the product. But animation is more than just an afterthought of smile-inducing touches. Good functional animation makes a user interface considerably more appealing and usable." - Will Fanguy

As you can conclude if you have read any of our other posts, at quasiStudio, we have used Unity game engine for both of our indie releases, Aero Attack, and our latest game Slizza.

Slizza has some magnificent animations, which I'm really proud of. Combined with the appropriate sound effects, they bring the game to a whole new level.

Developing all of the animation code without a third party library would have been long and tedious process.

Luckily for us, Unity has a very rich community, and there are many solutions we can look for when solving this problem.

We have decided to go with Surge, which was developed by Pixel Placement, guys behind iTween library. For a long time, iTween was my go-to library for the animations, including it in countless projects.

Before writing any animation-related code, it would be smart to do a proper brainstorming session where you'll define what style of animations are you going for.

Whether you'll choose bouncy-style animations for the playful products, or something more serious such as a simple fade, is an important decision to make.

Just picking a random style won't cut it.

You should take into consideration what type of game you are creating, and the vibe you want your users to feel. Too bouncy, or too stiff animations might feel out of place.

As an example you can see how our splash screen is animated. It's a linear animation with the duration of 2 seconds. In those two seconds, we simultaneously fade in, and scale the logo image.

Color _startColor = new Color(1, 1, 1, 0);
Color _endColor = new Color(1, 1, 1, 1);
Vector3 _endScale = new Vector3(1.1f, 1.1f, 1f);

Tween.Color(_logoImage, _startColor, _endColor, 2f, 0f, Tween.EaseLinear);
Tween.LocalScale(_logoImage.transform, _endScale, 2f, 0f, Tween.EaseLinear);

In Slizza, your goal is to assemble pizzas by placing slices in the pre-defined circles.

This animation will show throughout most of the gameplay, and might end up being annoying if it gets in the way of playing the game.

Animations should never prevent players from continuing with their intent, so these animations should be quick, and precise.

Too long animations would result in disrupting our player's ability to quickly place slices, making them frustrated, and who wants to play a game that makes them angry and stressed-out?

Tween.LocalPosition(transform, new Vector3(0, 0), 0.23f, 0, Tween.EaseInOutStrong);

Animation lasts around 230 milliseconds, which means the player will be able to place the pizza slices swiftly, but will still be visually perceived by the player.

The Model Human Processor finds that on average, it takes a human 230ms to visually perceive something, so, an animation with a duration of 200ms will likely be within range to be perceived by the average person.

Create it shorter and you risk it not be visually perceived at all, which would kind of defeat the purpose of animating it in the first place.

Tween.LocalPosition(transform, new Vector3(0, 0), 0.2f, 0, Tween.EaseInOutStrong, completeCallback: () => {
    transform.SetParent(transformCenter);
    Tween.LocalPosition(transform, new Vector3(0, 0), 0.2f, 0, Tween.EaseInOutStrong);
});
Tween.Rotate(transform, new Vector3(0, 0, 360), Space.Self, 0.2f, 0.35f);

We wanted to make Slizza as relaxing as possible. In order to keep this relaxing ambient, even if the player fails, we have decided to warn him with a nice animation.

When you make the mistake trying to place the slice on an already occupied slot, the slice will move towards that occupied slot, and then return back to the center.

Let's wrap it up.

I have decided to go with Surge because of the familiarity, and trust I have in Pixel Placement's software, but you can also use Unity's animation system, or any other alternative such as DOTween, or GOKit.

What I've learned while developing various indie games is that each game is specific, and should be treated as such.

Any software will do the job right if you've got the eye to fit the right animation style, speed, and sound to create a perfect 'feel.'

If you're looking for more, check out here how we've worked with gameplay animations for our first game, Aero Attack.

Hope you have enjoyed reading this post, maybe learned something new, and wish you all the luck experimenting yourself!