You may ask, what is juiciness? How can be game juicy? It is easy. I use definition by Martin Jonasson: “Juicy things are things that wobble, squirt, bounce around, and make little cute noises; it’s sort of a catch-all phrase for things that make a game more satisfying to interact with. Juice is typically auditory or visual, but it doesn’t really need to be…it’s about maximum output for minimum input.”
This is nice introduction video:
I created system for animations with easing functions in my case. I use definition of easing functions again: “Easing functions specify the rate of change of a parameter over time.” Easing functions are great for smooth transitions. You have basically three options how to move object from point A to point B.
You move it to point B instantly. It is sort of teleport. It is not juicy at all. You touch it, and object is on point B. It has little input, but also very little visual output.
This is how it will looks like:
object.position = pointB.position
Or you can move it all way from point A to point B. You touch object and it starts move to B until it reaches it. It is called linear transition. You use some linear function for it. Linear function has constant rate of change. Time can be used, because it’s flow does not change (forget about Einstein for a while). Linear transition is not bad, but there is little problem. When transition starts, moving object gets maximal velocity. When object gets to destination, velocity suddenly drops to zero. It does not look naturally.
This is how it will looks like:
object.position = pointA.position + (time * (pointB.position - pointA.position))
Or you can use easing function. There are plenty of easing function, which allows big variety of transitions. Slow increasing of velocity on beginning or fast drop of it at the end is not problem. All you have to do is to choose your easing function and change previous pseudo code little bit.
rate = easingFunction(time) object.position = pointA.position + (rate * (pointB.position - pointB.position))
Out cubic function:
Out back cubic function:
There are same A and B points in videos, however movement looks differently thanks to using of different easing functions.
I used examples with moving objects so far. I can be more powerful than that. You can pop up objects form nowhere, when you ease scale, you can make them disappear by changing their transparency, or you can make them wave to get players attention. But most important, game looks and feels better with them.
Animations are just one of possibility how to squeeze more juice out of your game. You can use sound, music or particle effects. You can look at video “Juice it or lose it” by Martin Jonasson and Petri Purho. They go through many possibilities how to make your game juicy. It is wonderful, what they make out of boring Beakout clone.
Or you can watch this video “The art of screenshake” by Jan Willem Nijman from Vlambeer.
And there are my results!
I used easing on many places and I am still not done.
Notice, how block waves when it connects to dots. I used teleport previously, which didn’t feel right. Now I use elastic easing function. It feels better. There is also effect of moving with blocked block. It moves little bit. Then there begins friction, so it moves less and less, until it stops completely. It gives feedback to the player that he touched block, but he can’t move it away.
I wanted to show progress to player by this animation. Every time when player returns to level select screen and have completed and unlocked some levels, this animation plays. It doesn’t matter how many levels was unlocked. This time I use easing functions to fade in unlocked levels and drop badge of level completion.
There is effect, which plays every time level starts. It was my first use of easing function. It is detail, which doesn’t affect gameplay, but it looks good.
I encountered problem. Some players didn’t figured out, that big play logo on main screen is play button, which transfers them to level selection screen. I used this animation, which basically says: “Push me, I am button!” This animation plays five second after game started. Five second interval doesn’t bother, but it also inform unsuspecting player. There is also never ending animation of word “Zeroes”.
There was no effect on pause table. It just appeared. There is this appearing effect now. It is easy to create, so why not use it, if it looks good?
What will be my next steps?
I recently started working on screen transitions. It is connected with easing. Current state is, that player pushes button in order to move to next screen. Nothing happens some time and than “puff!”, next screen is there. My vision is, that player pushes button, everything fades out and loading appears. Loading disappears as soon as it is done and next screen fades in. I started working on it already. Loadings work and they are quite fast. They are better than “click, 2 seconds unresponsive, puff level” at least. Fading still needs some work.
Expect new blog soon. You can follow me on twitter @er_mrk meanwhile or leave comment.