《The Floor Is Jelly》
这是另一款以果冻为题材的游戏《The Floor Is Jelly》，它是另一个杰出的典型。其地面摇摆与来自Disasterpiece的美妙音轨相得益彰，创造了极佳的润色效果。
另一个出色的例子就是《Super Time Force》（Capy Games出品），你不妨去看看Mark Brown关于该游戏介绍的短视频。
《Super Time Force》的长处就在于丰富的视觉特效，以及每个系统采用了大量的粒子效果。看看该游戏的截图就能发现：每个玩法都与游戏元素的移动有关。游戏为每个重要元素都制作了动画效果。每次碰撞都会产生令人满意的视觉效果。
juice out of your game design!
So you’ve made a great core game. The mechanics are rock solid, the first time user flow feels great and people can understand how to play, but somehow your game doesn’t feel quite right. Since gamers first began interacting with controllers, designers have struggled to make experiences feel better, this adaptation of your games feel is often referred to as a game’s juiciness.
What is juicing all about?
Game Juice is a pretty wide yet specific concept. As the term suggests, juicing is about taking a game that works and adding layers of satisfaction to improve game feel. Satisfaction is created by the senses, every visual and auditory input has the ability to make something that is virtual work in a way that is more believable. It’s not the art of realism, but more the art of illusion that leads a game to become juicy. As a designer it’s as if you squeezed the juice out of an already appetizing fruit. You can probably sense that beneath that catchy word lies a powerful game design concept. It is a specific lens designers can use to push our games’ feel further.
Where UX design follows objective principles and rules, game juice is more personal and emotional. The type of improvements you could add to your game may vary a lot. Each developer should have his own signature juicing techniques (and successful developers do have theirs). For example, Vlambeer is considered to be the master of screen shake. PopCap, could be considered the masters of Juicy interfaces and many others each create a sense of style that runs across all of their games.
Juicing, from a game developer’s standpoint, relies mainly on 2 domains: animation and audio.
The Art of tweening
Inbetweening or tweening, is the process of interpolating values between two extreme values using the computer. The linear interpolation, or lerp, is the most basic tweening method we have at our disposal. And the one we tend to use the most (for starters, a lerp function returns the weighted average of 2 values). When it comes to animating movements, linear interpolations produce tasteless results. This is normal, considering that pretty much nothing in the real world moves in a linear way.
Good tweening boils down to a good application of the 12 principles of animation. Having a good understanding of animation’s basics is key, which requires some practice. However, there are a few common tools we can use to make our tweens feel good easily: easings.
Easing out, easing in
As I said, in the real world nothing moves in a linear way. It takes a certain force to move anything from building up speed or creating inertia. It always takes a certain amount of time for objects to accelerate to their maximum speed, or to decelerate to come to a full stop.
In our games, we want to re-create that feeling of inertia for every single animated object. This is also our best way to convey a sense of weight for any item in our game world.
So what does easing mean? It’s a collection of functions used to gradually interpolate between 2 values. Easings offer us a convenient way to represent inertia. Easing equations interpolate between two values with all sorts of accelerations and/or decelerations curves. There are many easing types at our disposal, and some fancy functions can produce very interesting results. I.e. the bounce/elastic formula. You can find many common equations on the easings.net website.
A few samples of common easing equations
You can see that each equation has three variations. It can:
Ease in, accelerate at the start.
Ease out, or decelerate at the end.
You will generally want an appearing animation to ease out. In particular for UI elements. When it falls into the screen, you want your game’s logo to gently decelerate towards its final position. You can treat a moving UI element like a character: it accelerates at the start of its moving state (fades in), moves at a constant pace and slides a bit before it stops (eases out).
When should you use a particular easing type? Well, it’s up to you!
Easings have to be chosen using your sense of spacing and timing. If you want to get abrupt movements, you will want to lean towards exponential easings. If you need softer movements on the other hand, you can focus on the simpler, quadratic easing. Ask yourself the question, what emotion do I want to create for my player?
The best way you can push your understanding and mastery of tweening is observing how other developers do it. The fastest way to learn is to thoroughly study your peers.
Your juice is meant to reinforce your core mechanics
Game juicing is often presented as a collection of tricks you can use to better the sensations of your player. It is not a matter of using prebuilt formulas though. Your game’s juice should always echo your core gameplay. We cannot improve our game’s feel randomly. Screen shake, squash and stretch, bounciness and other fast-paced animations are only relevant in specific situations! They make sense in dynamic games.
In a story-driven game, or in a horror game for example, you want your animations to be subtle to convey a sense of mystery. You cannot always used that funny elastic equation for instance. Both the amplitude and the rhythm of your tweens will hugely vary depending on your project’s requirements.
game analytics for game developers
Child of Light offers many examples of subtle uses of secondary animations
I insist: the concept of juice is meant to reinforce your existing gameplay. Juicing up shooting games has already been thoroughly documented by Vlambeer in the talk I linked to above. In such a game, juicing is pretty straightforward: it boils down to making the player feel powerful. You can do so by increasing the size of your bullets, make them move faster, add some recoil when shooting, etc.
What about other types of games? Well, each genre and story can be thought of as a different type of fruit: it deserves its own trademark juice. I’ll give you a quick rundown of the few games’ that juice, but before that we have to talk about the other domain we want to pay attention to, as for is juicing is concerned.
Audio is often overlooked as far as improving your game’s feel is concerned. At least among indies with low budgets. Yet, it offers an affordable way to improve your game’s feedback rapidly. Good sounds reinforce the presence and credibility of any interaction happening in your game. Bad sound design can break your game.
You should put a strong emphasis on gameplay related sounds. All interactions the player can make should have clear audio feedback, those sound should feel full. In other words, you want to find a sound feeling and try to think about how the tone communicates presence or impact. In a casual game, most tones should be happy, melodic, exciting or rewarding. Each one should feel pleasant and should enrich a positive experience. Check out how TwinGo! creates the feeling of joy in all the interaction within the menu structure, almost mimicing a Nintendo-like quality. When creating an atmospheric game such as The Room, silence or near slience is important to create a dramatic volume change when something mysterious or sinister does happen. Using delicate compression, you can make them pop out!
As those sounds are gameplay related, they are the most important elements of our sound design. They are our core sound design in a sense. But a game’s main sound effects alone don’t make up for a compelling auditory experience. We still have to think about our soundtrack.
The power of music
Soundtracks are probably the most efficient tool we have at our disposal to create emotion. Although we are bathed in music on a daily basis, the complexity of it’s technical makeup is often foreign to us. Music is somewhat mysterious and magical, it can alter our mood, cheer us up or even make us feel nostalgic.
In last week’s article about creating immersive game intros, I linked to the powerful title screen of Xenoblade. It really feels beautiful. If you keep staring at it and let the scene sink in, it will touch your very heart. Well, I invite you to take a quick look at the video with the sound muted. Does it still feel the same? The image alone looks pretty… but lacks emotion.
As in sound design and animation, a good understanding of the characteristics of powerful soundtracks comes with experience. The only advice I can give you in the case of music is not to neglect it. There are many competent composers and music producers out there waiting to help you push that game to the next level. If you are serious about making great games, don’t hesitate to hire one!
Having solid gameplay sound effects and music are a basic requirement for pretty much all games. There is a type of sound that is used less often – in particular if you have a low budget: soundscapes. Soundscapes are audio tracks that are meant to ground the player into the game world.
To immerse the player it is important to add sound loops corresponding to your environments’ ambiance. Even if you have music playing on top of it! Soundscapes are not meant to be consciously listened to but fade into the background. They are barely meant to be heard: they are meant to be felt.
Is the player crossing a stream of water? The sound of its flow should gently mix with the game’s soundtrack. Is the player passing by a chimney? You can make that fire feel warmer with some soft crackling. You get it. Background audio can help you to improve the player’s experience.
Common juicy effects
Although your approach to juicing will depend on your game, here are a few common visual effects that will work for most projects. Those mostly rely on particle systems.
The first idea is to use an animated effect whenever a collision happens between two sprites in your game. This could be:
Dust when a character lands or runs. This is an efficient way to make your character feel like it belongs a bit more in his world and give his steps some impact.
Sparkles, or stars. This one is a cheap trick that once again gives a sense of impact whenever two objects are colliding.
Pausing the game for a split second is also a very efficient way to reinforce a collision. You can lengthen that pause or delay to make a hit or a death feel powerful. This is actually a common animation technique that we call a hold. Character animators can hold their key poses for a few frames to reinforce them. This leaves some time for the viewer’s brain to process the most important moments of an animation.
Trails are another kind of common effect. Trails are useful whenever we want to put an emphasis on an object’s arc of movement. This is particularly useful for fast moving objects. For instance, we often see trails:
In a sword or weapon slash animation. A little tip: the trail should instantly disappear on hit.
Behind a fast moving character.
It is important to note though that trails slow down movements. This may not be intuitive for non-animators, but trails can hinder the impact of an animation. They are a specific application of what animators call smears. If we think about it, trails or smears blend the current pose of an object with its position a few frames before (you can go to the animation smears tumblr to see some examples of how animators use those). So be careful with trails!
game analytics for game developers
Juicing further: procedural movements
Your game’s juice also can be squeezed out by adding depth and subtle variations to the animations you implement.
In a 2D sprite engine, we are limited as far as the types of movement we can create. We can play with the position, rotation, and scale of our assets. Luckily, we don’t need more! Using sine or cosine functions, we can make wonders happen!
If you animate the rotation of plants using a periodic function, you will make them feel like they are being pushed by wind. A little tip: to create a believable wind effect, layer multiple sinuses of varying amplitudes and phase!
Animate the scale and opacity of a transparent circular sprite to add warmth to a bonfire or a lamp!
Animate the scale of a circle in a bouncy way and make it move in a loop to get a believable fly!
In the case of 3D engine like Unity, you can easily add a lot of variation and complex movements to your assets using shaders and Vertex colors. Vertex colors are lightweight, easy to paint, and can be used for any kind of masking you could imagine. We are provided with 3 channels we can mask our meshes with, giving us more masking flexibility than we need most of the time.
Vertex colors make it easy to mask part of a foliage mesh and simulate a wind animation on that masked portion for instance. Here is an example of this technique in practice. Try to look at the parts of the patches of leaves that are touching the branches: they do not move. In Unity’s case though, Speedtree handles the masking and animation for you. But you can achieve the same result with plain code.
It gives us the power to animate specific parts of our objects using code! Using the world position of our objects, we can automatically offset the phase of our wind animation for each bit of foliage in our level. At [almost] no cost! And this is true for both 2d and 3d games.
Case studies: Juicing that works
Analyzing examples is the best way for us to see what works. If it works for others, chances are it will work for our games. At least we can pick relevant titles to use as references or as sources of inspiration.
The first example I will take is one of a minimalistic, pretty popular free app published by Ketchapp: Jelly Jump (Apple Store link).
In that game, all the juicing revolves around the jumping jelly. Let us first analyze the game’s basic visual setup.
First of all, the background is immaculate to emphasize the character. The jelly is placed at the center of the screen and its color is saturated to contrast with its environment. You can also note that the jelly is not shaded like the rest of the level. It feels cartoony. It creates a solid foundation for juicing. Keep in mind that we can’t get a good juice without a good fruit.
Then comes the juice in itself. As I said above, it revolves around the jelly, which does 3 things:
It leaves a mark on the ground upon landing.
Here, we find 3 principles of visual juicing used in synergy. The character is animated using tweens (wobbles), its movement is enriched with particles, and it leaves a permanent mark on the ground. This combination of visual cues result in a believable jelly.
Watching a quick gameplay session, you can clearly see that the jelly’s wobbles are dependent on the thrust of its jump and the force with which it lands. This reinforces the core jumping mechanic. And that is it for the heart of this game’s juicing!
Although Jelly Jump is not the deepest game you could study around the app store, I think that taking a look at minimalistic games offers us a great opportunity to learn. One touch games with lean visual designs are great references to study from. Their central mechanics and visuals are generally very polished, albeit simple. Ketchapp published a few good examples of such applications.
50 shades of jelly
The floor is Jelly Screenshot
I would like to keep moving on our way to jelly-ness by pointing out an exceptionally juicy game about jelly: The Floor Is Jelly. This is another exceptional game to study from. It possesses a particularly polished feel thanks to the exceptional synergy of the wavy ground and the beautiful soundtrack from Disasterpiece.
Just look at it: everything moves.
The ground itself is alive: it ripples every time the character lands on it. It responds to the player’s movements. Every bush or tree squashes and stretches with each shockwave. Leaves are falling. Birds are flying. The world breathes.
I can’t provide you with an exhaustive analysis of this title’s juicing techniques. I invite you to play it instead and see for yourself how well it works. It is really a matter of synergy in that case: every choice is reinforces the game’s main mechanics and story (yes, there is some sort of a story in The Floor Is Jelly).
One last example
Game Analytics Blog
I would like to add another great example that was pointed out in Mark Brown’s short video about game feel: Super Time Force, by Capy Games.
Super Time Force’s strength lies in the abundance of visual effects used in the game. And the abundance of particles used in each system. A single screenshot from the game is enough to tell the tale: every gameplay related element moves. Any important element is animated. Any collision is an occasion to play satisfying visual effects.
Hopefully, this first overview of the concept of game juice gave you a sweet taste of it. It is now up to you to come up with your own way to extract more out of your own game.
You should always focus on your game’s emotional essence first and foremost, what emotion are you trying to convey to your player. You won’t know what fruit type you’re trying to juice until you think about which emotion suits your game best. Next you should also know when to quit! Used in excess, juicing techniques will both waste your time and annoy your users, as a simple rule of thumb – the more common an action, the simpler the juice.
I will leave you with my recipe of a good game’s smoothie:
Animate everything that matters.
Study the juicing Masters.
Don’t neglect your audio.(source：gameanalytics)