Clicking and Rewards in Empires and Allies

Introduction

Empires and Allies is a popular Facebook game made by Zynga. The core interaction the player has in E&A is clicking on interactive objects and rewards with the mouse. With some simple techniques Zynga was able to make a pretty boring, repetitive task feel good even after the thousandth time. Game developers who take the time to polish their core interactions like Zynga will find players returning to play their games more often.

First before we break things down, watch these sample videos:

Clicking and Expiring

Clicking the Reward

Breakdown of techniques

1. Buildings and icons

The first thing to note is that all the interactable buildings have animating icons above them:

The icons animate up and down non-linearly and the start times are staggered randomly among the buildings, both of which add a nice touch to the scene. On mouse-over, a buildingís outline will highlight. There is no sound for building mouse-overs which makes sense considering the how densely packed buildings can get.

2. Clicking a building

On click, a series of events happen:

First the clicked building immediately "greys out", loses color and goes semi-transparent. The bulldozer immediately moves to the first clicked building and when it gets there a status bar ("Harvesting") appears over the building and starts to fill up. At this point a sound plays indicating work is being done. Each building-type has its own unique sound. Once the bar is filled, it immediately disappears. 2 things appear the moment the status bar is filled: status text and rewards.

The status text ("-1 Energy") appears on the bottom of the building. This text moves up vertically for about a second stopping near where the status bar was and then fades quickly.

The rewards also appear instantly. Actually there is a slight delay between the 2 rewards which makes things more dynamic. Upon appearing, a reward will make a sound. The rewards have a nice physical animation going up and out, then squashing and emitting short-lived particles when they hit the "ground".

These new visuals, text, animations, and sounds all serve to provide instant feedback that the player did something well even if it was just a simple mouse click.

3. Expired rewards

When the rewards are left un-clicked, they will expire and go through the following steps:

First after 7 seconds the rewards indicate they are about to expire. They pulse once slowly for a second and then pulse 4 times quickly over the next second. After expiring, rewards move to their respective HUD elements at the top of the screen and disappear. Cash and minerals move to the upper left and experience to the upper right. In a nice bit of polish, expired rewards curve towards the side of the screen instead of straight toward the HUD. Finally, the corresponding HUD element will quickly pulse 30% bigger over around 1/4 second.

All of these steps simply serve to inform. By not adding in new elements like text, particles or sound, the player however does not get positive feedback for letting rewards expire without clicking on them.

Clicked Rewards

If the player clicks a reward before it expires, sound, reward text, and a bonus meter are added. I believe all three of these contribute to the playerís desire to click rewards, a task that otherwise could feel pretty rote.

First, on mouse-click, particles appear briefly and appropriate sound plays.† The clicked reward then immediately moves to the HUD as before.

Reward text also appears ("+288 coins" or "+1 XP") moving up and fading similar to the "-1 Energy" status text from before. Note this text is the same color as the appropriate meter on the HUD which helps players to understand the HUD better.

4. The bonus meter

A bonus meter also appears in the upper right of the HUD when a reward is clicked. This meter rewards combos (clicks that happen within a short enough time of each other) which give players a very simple level of strategy. The more rewards the player clicks with the bonus meter up, the higher the bonus cash when the meter expires:

The bonus meter quickly fades in with text below it ("Bonus"). Each click of a reward will fill the meter from left to right a little more.

Once the meter is full, it will start to fill again from the left. The existing text will fade quickly while new more impressive text ("Amazing!") will scale up and fade in. And most importantly, every time the meter fills a new sound plays. This new sound has increasingly higher pitch. This subtle detail serves to amplify the tension, encouraging players to keep up the combo.

If 2 seconds go by without a reward click, the bonus meter has a flashing red outline to indicate itís about to expire. Around 2 seconds later, the meter disappears. At this point a new rewarding sound plays and new text appears ("Bonus: 480 Coins!") in the meters place. This text fades in and scales much bigger lasting for a full 3 seconds.

Extra video

Take a look at the following video to see a lot of the same principles in action within the "combat" part of E&A.

Sample Combat

Conclusion

Main takeaway

• Engage players in your core interactions by providing many forms of instant feedback. E&A uses sound, animation, particles, moving text, and new meters when players mouse-click.

Some things to keep in mind

• Keep animating icons and rewards fresh with non-linear movement, squash, particles and staggered start times.
• Even basic text can be made rewarding by a simple animation up.
• Fade in, fade out, and scaling should be considered for every UI object.
• HUD elements should react visually when added to (pulsing larger).
• Sound should mostly play as a positive reward for the playerís click. Rewards don't sound when the simply expire.
• Increase the pitch of sounds as players successfully combo to increase tension.

Clicking interactive objects in E&A feels good and it was interesting to look closer to see why. None of the specifics are too surprising for an experienced developer. What is surprising is that we don't see these simple forms of feedback in every game. In my experience UI elements are often considered done in the schedule at some point before they reach really good polish like this.