作者：sylvain dubrofsky

《Empires and Allies》（以下简称E&A）是一款由Zynga开发的热门Facebook游戏，它要求用户以鼠标点击其中的交互性物品和奖励。Zynga仅使用一些简单的小技巧，就得以让原本枯燥而重复的任务富有趣味。游戏开发者若能有效借鉴Zynga这种对核心交互元素的优化处理方法，就有可能吸引玩家频频回访游戏。

技术分解

1.建筑和图标

注意，游戏中所有的互动性建筑上方都有一个动画图标：

icons(from gamasutra)

这些图标以非线性方式错落有致地在建筑群顶端上下起伏，鼠标移过时，建筑轮廓会发光。鼠标移过建筑时不带声响，因为玩家要点击的建筑非常多。

2.点击建筑

首次点击，建筑立刻会呈现“淡出”，变成半透明状态，而推土机则迅速行驶至首次点击的建筑，建筑上方会呈现状态条（游戏邦注：“收获”状态条），并开始填满。此时会有音乐响起，表明该项工作已经完成。每种建筑都有自己独有的音乐。状态条填满时，它就会马上消失。在状态条填充期间，屏幕还会显示状态文本和奖励这两项内容。

clicking a buliding(from gamasutra)

状态文本（例如“-1 Energy”）显示在建筑上方，这个文本会在状态条消失时立即出现，然后迅速淡出。

奖励内容也会伴随音乐，与状态文本同时出现。这项内容拥有良好的物理动画效果，它们“着地”时会呈现挤压和短暂的颗粒效果。

这些新型视觉艺术、文本、动画和音效可以为玩家带来即时反馈，显示他们已经出色完成任务，尽管玩家可能只是轻点鼠标而已。

3.奖励消失

如果玩家没有点击奖励物品，它们不久就会消失，其过程如下：

expired rewards(from gamasutra)

奖励物品出现7秒后会自动消失，它们先是抖动1秒，下一秒则以4倍的频率抖动。消失后的奖励物品会飞向屏幕顶端各自的HUD元素栏目并消失。例如Cash和矿物会飞回向左上角，而经验值则移向右上方。其消失的处理方法也很微妙，它们并非以直线路径飞回HUD，而是以曲线方式自动消失。最后，这些奖励物品各自的HUD元素会快速抖动并膨胀30%左右，持续时间约四分之一秒。

这个过程并没有添加文本、颗粒效果或音乐等内容，这可以更好地提示玩家，他们没有点击物品，因此无法获得什么积极反馈。

4.点击奖励

如果玩家点击了奖励物品，就会听到音乐、看到奖励文本和相应的分值。我认为这三项元素是吸引玩家点击物品的主要动力，没有它们的存在，这种点击行为就会沦为无趣的活动。

clicked rewards(from gamasutra)

点击物品时，屏幕会短暂呈现颗粒效果以及相应音乐，被点中的物品也会迅速飞向上文提到的HUD栏目。

屏幕出现的文本内容（例如“+288 coins”或者“+1 XP”）也会上升并逐渐淡出界面。注意这里所运用的颜色与HUD奖励仪表相同，这有助于玩家更好地理解HUD设置。

5.奖励仪表

玩家点击奖励物品时，屏幕HUD右上方也会出现奖励仪表。奖励仪表下方也会出现文本内容（“Bonus”），每点击一个奖励物品，都会增加仪表从左到右的填充量。

仪表填满时，就会重新从左往右继续填充，原先的字幕会迅速淡出，随即出现的更抢眼的字幕（例如“太棒了！”）。更重要的是，每次仪表填满时都会伴生一种分贝更高的新音效。正是这种微小的细节强化了游戏的紧张感，鼓励玩家继续玩游戏。

bonus meter (from gamasutra)

如果玩家过了2秒还没有点击奖励物品，奖励仪表就会闪现红色的轮廓，提醒玩家奖励即将消失。大约2秒过后，奖励仪表也会消失。此时原来的仪表位置会出现新的奖励音效和字幕（例如，“Bonus:480 Coins!”），这些字幕会淡入并扩大，持续时间为3秒。

总结

*开发者应提供各种即时反馈吸引玩家体验游戏。例如E&A就在玩家点击鼠标时使用了音效、动画、颗粒奖励、活动文本和新仪表等交互元素。

*可通过非线性移动方式、颗粒和挤压效果、颗粒和交错时间来设置富有生气而不呆板的动画图标和奖励物品。

*即使是最基础的文本内容也可因简单的动画效果而更富生气。

*淡入、淡出和缩放是每个UI对象都可以考虑的设置。

*添加HUD元素时应凸显其视觉效果（例如让它膨胀扩大）。

*在玩家点击鼠标时，最好用音乐体现积极反馈。奖励物品消失时不需要添加音效。

*玩家成功连击时要增强声效的音量以增加紧张感。

相信富有经验的开发者对上述内容都不会感到陌生，但奇怪的是我们常常忽略了每款游戏中的这些微小反馈细节。从我的个人经历来看，极少有UI元素能够达到E&A这般优化效果。（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）

Clicking and Rewards in Empires and Allies

by sylvain dubrofsky

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.（source:gamasutra）