从案例解构针对智能手机的游戏触屏机制设计

夜行的猫仔

作者：Adam

就像我之前提到的，我在2012年写过一本关于手机游戏设计的书。

尽管内容是我自己写的，但是照片和插图却是来自Jackie Fong，Rocco Commisso和Gabby Darienzo。

许多包含游戏的照片的所有权是属于XMG Studio。

以下是来自我的这本书的第二部分摘录：

创造一个触屏机制

iOS平台提供了许多创造游戏控制机制的选择。加速计，触屏和扩音器都能够用于创造一个吸引人的游戏机制。每一种控制选择都有自己的利弊，重要的是你必须在设计机制时了解它们。

轻敲屏幕的任何地方

即使没有任何教程，玩家也知道这点。触屏将让玩家自然地轻敲屏幕以继续，并推动游戏让玩家看到会发生什么。

这一机制也能够确保玩家的手指无需一直碰触屏幕。游戏一开始后玩家的手指便能够离开屏幕，如此将能够确保玩家始终参与着游戏。

使用这一机制的前提是它适合你的游戏类型。基于游戏机制，轻敲屏幕并没有多少游戏玩法，你可能只是面对着时间元素。如果轻敲机制中要求更多深度，那么使用轻敲和控制机制会更有帮助。

轻敲和控制

《奶牛大战外星人》是一款很棒的游戏，但是其触屏机制的障碍在于手指，即手将长时间停留在屏幕的左边。如此玩家将如何识别从其手下出现的外星人呢？

当设计触屏机制时，开发者应该避免手指过长时间停留在屏幕上。

要记得手指会遮盖屏幕，这在决定轻敲和控制机制时非常重要。根据游戏位于玩家的哪个方向而将这些机制置于屏幕下方位置很重要。需要注意的是AppStore带有一个滑行装置，所以玩家会倾向于将手指置于最突出的位置，如此便不会遮盖到即将出现的障碍物。

轻敲和控制可能是最明显的轻敲机制。确保具有“控制”部分的动画非常重要，否则玩家便不能识别轻敲机制和轻敲与控制。确保玩家在快速轻敲与长久按压按键时会获得显著的不同结果。

轻敲和拖曳

轻敲和拖曳控制，特别是那些要求精确度的游戏（如画线游戏）更难进行控制。玩家将使用手指进行绘画，并且会遮盖掉一半的屏幕。基于街机游戏机制（如《Flight Control》），有经验的玩家很快便学会快速绘画，如此便不会因为碰撞而牺牲。

不要期待用户能够使用手指绘制一些复杂的内容同时还要求他们注意屏幕上的变化。

tap & drag(from mobilefreetoplay)

就所有控制机制来说，它们会期待着能够收到即时的正面反馈，即关于设备接受了它们的输入内容。确保控制机制能够画一条线，标记开始和结束的位置，并确认用户“正确”绘制的时候。就像在《Flight Control》中，玩家总是很清楚一条路线的起始位置，单位沿着道路移动的距离，以及路线何时是朝着正确的位置延伸等等。当路线出现时，它们会提供直接的反馈告知路线已“确认”。

基于这一机制，你必须去平衡精确度与速度。玩家可能会匆匆忙忙地绘制也有可能很仔细地绘制。选择其中的一种可能性，或让玩家适应速度或精确度。《水果忍者》在这方面便做得很好。当玩家在屏幕上滑动手指时，反馈便会立即呈现出来。它们的机制混合了时间与精确度。在前面的一些回合里并不会特别强调精确度，一开始的游戏玩法只是在屏幕上有趣地削水果。随着炸弹的出现，有经验的玩家将开始要求精确度。对于触屏设备来说做到精确度有点困难，因为玩家的手指总是会盖住一些内容。有时候使用放大功能去呈现机制所指向的准确位置将能让玩家轻敲并拖曳他们的目标位置。如果玩家需要这样的精确度，那就不要再幻想他们能够快速实现目标。

滑动控制

许多游戏想要最大限度地利用触屏：这是一个带有多维控制的2D平面。而滑动便是快速2D控制的最佳表现。这将重新创造出现实世界中移动与滑动的感觉，所以这很适合用于打球，舞剑，旋转物体或抚摸宠物。

关于时间任务的滑动较困难。玩家很难去计算滑动的时间。例如如果你正在通过滑动向玩家投掷棒球，那么何时球会击中球棒？是在滑动的一开始呢？还是在滑动的最后？或者是在中间阶段？《水果忍者》在这方面也做得很好—-但是它却是少数提供给玩家足够反馈和方向让他们在基于时间与追踪任务时使用滑动机制的游戏。

temple run(from mobilefreetoplay)

《神庙逃亡》从未要求玩家做出一连串的滑动动作。因为这对于玩家来说太困难了。

不要强迫玩家长时间不停地滑动手指。这会导致玩家感到疲劳并最终放弃你的游戏。最佳滑动机制是间歇式的，并且能够按照玩家自己的节奏（游戏邦注：即玩家能够选择下次什么时候进行滑动）。为了战胜疲劳，我们可以让玩家使用食指而不是拇指。在屏幕中间位置设定滑动机制，这一区域是拇指比较难触及的，如此玩家便会选择使用食指了。我们要记得使用食指意味着一次只能运行一个碰触机制。如果你希望玩家使用两个手指的话，他们可能还是会选择拇指。

对于玩家来说，长时间进行滑动将会很累。特别是当你要求他们面向整个屏幕进行滑动时。

《Flick Golf》让玩家通过快速滑动去消除空中的球。

《Flick Golf》通过将高尔夫球放置在屏幕中间位置而推动着玩家去使用食指进行滑动。尽管在半空中，玩家也会不断滑动球去创造旋转。虽然这会导致玩家的疲劳，但是游戏会在球落在地上时暂停游戏，这让玩家可以进行适当的休息。这便是非常有效的滑动机制，提供给玩家所需要的休息机会。

加速计和陀螺

滚球游戏中的加速计控制。

滚球类游戏的加速计控制要求玩家使用两只手，但这却是依靠直觉且非常现实的设置。

我们可以使用陀螺仪实现增强现实技术控制。这让玩家能够拿着设备并在现实空间四处移动。这种控制方法只能出现在特定区域：它们只适用于一些较开阔的区域，如此玩家才不会因为四处移动而感到尴尬。

加速计控制可以避免玩家手指总是置于屏幕上。玩家可以无需使用手指去控制游戏，这让玩家能够用一只手玩游戏。

容易被发现。玩家将自然地拿起设备并巧妙地移动设备。你可以通过确保玩家可以轻松控制游戏而平衡易发现性。太敏感的话游戏很容易让人受挫，而如果太迟钝的话，玩家便会觉得游戏很笨拙，并因此放弃游戏。

作为主要机制的加速计将让游戏能够添加轻敲机制作为次要功能。

然而，在加速计设备中很难进行精确的2D控制。利用敏感度能够带来帮助，但是玩家会更喜欢使用轻敲和控制机制精确地控制加速计设备。

加速计控制将遭遇校准问题。玩家不会总是在相同方向玩你的游戏，所以他们希望你的游戏能够适应他们的任何游戏方式。即使你的游戏是一款滚球游戏，你也不能假设用户总是俯视设备而玩游戏。玩家可能会基于各种情况玩游戏，并且他们会希望游戏能够适应他们所选择的不同情况。玩家可能会在床上，在行走的时候或坐在椅子上玩游戏，而设备的默认方向将不能支持每一种情境。

确保加速计的移动数较少。因为如果玩家是使用一只手控制游戏，并且游戏要求他们不断进行左右移动，不久后他们的手腕肯定会感到酸痛。要求玩家在游戏中不断摇动也会导致他们产生疲倦，所以游戏应该避免这种情况。如果玩家越频繁地移动屏幕，他们看到的页面内容便越少。

尽管摇晃设备看起来很酷，但你可不要期待着你的用户基础愿意这样拿着他们的设备，或者会在许多受限或公共区域中轻松地这么做。

在玩家触手可及之处使用陀螺控制也会在长时间后让他们感到疲倦。所以开发者必须确保游戏玩法足够短暂且无需频繁地移动设备。

屏幕上的按键

这是不可避免的。最终你都需要在游戏中的某些位置上设置一个屏幕按键。如暂停按键，加速按键，或广告等等。

开发者必须尽可能低去简化这样的设置。屏幕按键应该是开发者不得已才做出的选择。

在你设置一个屏幕按键前请先遵循如下步骤：

步骤1：确保按键是可调整的

canabalt(from mobilefreetoplay)

《屋顶狂奔》便是一个完美的例子：一键跳跃设置让玩家可以使用屏幕上的任何区域。这让游戏机制也可以适应玩家的不同偏好。

在任何时候都允许游戏能够适应玩家的偏好。比起设置一个让玩家按压的按键，游戏选择让玩家能够在任何地方进行按压。玩家便能够选择自己最舒适的位置进行按压。虽然确保机制的明显性很重要，但是你同时也需要确保游戏的易用性。

比起通过方向键去控制玩家的左右移动，游戏允许玩家能够通过轻敲屏幕的左右方进行两边移动。这也非常适用于ipad和iPhone。

比起在屏幕中间插入操控杆，游戏让玩家能够按压并滑动手指去定义操控杆的位置。

步骤2：确保与环境相关

只在玩家需要的时候呈现一个按键。这能在任何可能的情况下删除并隐藏元素，并将推动玩家更频繁地使用这些功能。

例如，如果你想要玩家在游戏开始的时候使用增益魔法，你便可以在适当的时候呈现使用这些魔法的大型按键。这能够推动使用率。

这同样也会影响游戏玩法，如果玩家专注于决定是否该按压这一按键时，周围的游戏玩法就不该在这时候跳出来让他们分心。确保玩家在面对与环境相关的按键时不需要再控制其它机制。

步骤3：确保它们是玩家认真考虑后的结果

在屏幕上的一个尴尬区域设置一个屏幕按键可能会避免意外的点击，并能够确保玩家是经过深思熟虑后才选择这一按键。根据要求，在标准手机上的按键应该是基于最小的45px宽度，而在retina手机上是90px宽度。如果两个按键间的距离越近，玩家便越有可能不小心按到其中一个。所以我们必须确保仔细设置按键，根据目标设备选择按键的规格，并确保它们之间拥有一定的距离，以避免错按。

确保游戏机制足够自然

关于创造一个触屏机制最重要的一部分便是确保它足够有趣。确保其足够自然非常关键。

创造有回应的机制。没有什么能够像糟糕的技术性能那样摧毁游戏控制机制。确保触屏机制的回应速度是60帧每秒。这将能够最小化输入延迟，并确保控制的快速回应。反馈速度越快，这一反馈的传达便会越顺畅，游戏机制便会越自然。

《愤怒的小鸟》便拥有非常自然的机制。当你拉回弹射椅时，带子将发生改变并适应你的每一次移动，声音也将向你传达你所使用的张力，这与实体对象相关—-最后你会觉得这就好像自己在亲自拉弹弓一样。

在控制中提供许多反馈。

使用动画，踪迹，声音和震动而直接呈现给玩家游戏反馈。这会让游戏更具有直觉性，并确保玩家更有趣地玩游戏。

确保拥有有趣的机制。

AppStore中所有成功的游戏都带有能够有趣控制的触屏机制，不管是关卡，谜题还是障碍。如果你的机制不够有趣，那么即使你再添加其它内容，玩家也不能有趣地玩游戏。

受到现实世界的触觉系统的影响。

《愤怒的小鸟》为了呈现直觉，有趣且自然的发射机制而使用了拉弹弓感。

《奶牛大战外星人》将按压绵密泡沫感作为其触屏机制的灵感来源。

而《水果忍者》使用了切断动作让玩家觉得自己就像真正的忍者似的。

所以当你在设计触屏机制时最好能够利用现实世界中的一些内容。这将帮助你创造更具直觉性且更有吸引力的游戏。

（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转功，如需转载请联系：游戏邦）

Building a Touch Mechanic

by Adam

As said in previous posts, I wrote a book back in 2012 on mobile game design.

While the content was written by myself, the photos and illustrations were done by Jackie Fong, Rocco Commisso, and Gabby DaRienzo.

Many of the photos include games that are owned by XMG Studio.

Here is the second excerpt from the book :

Building a Touch Mechanic

The iOS platform has a lot of options for creating game control mechanics. Use of the accelerometer, touch screen, microphone can all be used to create a compelling mechanic. Each control option has pros and cons, and it is important to be aware of them as you design your mechanics.

Tap the screen anywhere

Without any tutorial, the player can discover this. The touch screen asks the player to naturally tap on the screen to continue, to prod the game to see what happens.

This mechanic also keeps the player’s fingers off the screen. Fingers leave the screen as soon as they came, making it easy for players to stay involved in the game.

Use this mechanic as much as possible, but only if it makes sense with the style of game. Just tapping alone does not give much to work with in terms of game mechanics, you only have the aspect of timing to play with. When a little more depth is required in a tap mechanic, it is more useful to use a tap and hold mechanic.

Tap and Hold

Figure 2-12. Cows vs Aliens is a great game, but the hindrance of the touch mechanic is that fingers, hands are left on the screen for a long time. How can a player spot an alien coming from underneath their hand?

When designing touch screen mechanics, always design so that fingers are on the screen as little as possible.

Keeping in mind that fingers cover up the screen, it becomes important when deciding between Tap and Hold mechanics. Keeping these mechanics to the lower portion of the screen is always better, depending on what play orientation you’re in. Note that with most one button runners on the AppStore (Canabalt, Monster Dash, etc.) the player learns to position their finger in the least obtrusive place so that it does not cover up upcoming obstacles.

Tap and hold can be just as discoverable as a tapping mechanic. Ensuring there is an animation for the “hold” part is very important, otherwise the player can’t discern between a tap mechanic vs. a tap and hold. Make sure it’s very obvious from a quick tap that the player can hold the button a bit longer for a different result.

Tap and Drag

Tap and Drag controls, especially those that require precision (like line drawing games) are difficult to manage. The player is drawing with their finger, and covering up half the screen. With arcade mechanics (such as Flight Control) advanced players will soon learn to make their drawings quickly so that they aren’t caught drawing when the crash is about to happen.

Don’t expect the user to draw intricate drawings with their finger AND require them to monitor what’s going on on the screen.

As with all control mechanics, they expect immediate positive feedback that the device has accepted their input. Make sure to draw a line, mark their start and end points, and confirm when the user has drawn “correctly”. Note in Flight control it is immediately obvious where you started and finished a path, how far the unit has moved along the path, and when the path is drawn to a correct location. The path fills in, giving immediate feedback that the path is “accepted”.

With this mechanic you have to balance precision with speed. Players will either rush to draw, or be precise. Choose one, or ease the player into speed or precision. Fruit Ninja (Halfbrick) does this very well. Immediate feedback is shown when your swipe is on the screen. Their mechanic mixes the timing and precision. Not a lot of precision is necessary until later rounds, in the beginning the gameplay is just fun to slice fruit around the screen. As bombs come in, precision is required for more advanced players. Precision is difficult with touch screen devices, as players fingers are commonly covering up where they are drawing. Sometimes using a zoomed in view to show the exact location the mechanic is pointing to just above where they’re finger is will allow players to tap and drag to the exact precision point they need to be. If players are required to be this precise however, don’t assume they will be fast.

Swipe Controls

Many games want to use the touch screen for what its great for: it is a 2D plane with multi dimensional control. Swipe is excellent for quick 2D control. It re-creates the feeling of flicking and swiping in the real world, so it’s excellent for creating feelings of hitting a ball, slicing a sword, or rotating an object, petting an animal.

Swipe for timing events is difficult. It’s very difficult for the player to time their swipes. For example, if you are swiping to hit a baseball thrown at the player, when is the moment that the ball hits the bat? Is it at the beginning of the swipe? Is it at the end of the swipe? Is it somewhere in the middle? Fruit Ninja does this impeccably well – but is only one of the few games that have given the player enough feedback and direction to build the player up enough to use the swipe mechanic properly for timing and tracking events.

Temple Run never demands the player to do many swipes in quick succession for long periods of time. This would just be too much on the player.

Don’t force the player to constantly swipe for long periods of time. Fatigue will set in, and the player will give up on your game. It’s usually best that the swipe mechanic is intermittent and at the player’s own pace (they choose when to swipe next). To combat fatigue, influence the user to use their index finger rather than their thumb. Have the swipe mechanic in the center of the screen, this area is harder to reach by thumb, and the player will swap to an index finger. Just remember that using an index finger means that there can only be 1 touch mechanic operating at once. If you expect the player to use both hands, they will have to use their thumbs.

Constant swipe mechanics can become tiring for the player after a long time. Especially if you force the player to use the entire screen.

Flick Golf tasks the player with making a lot of quick swipes while the ball is in the air.

Flick golf influences the player to use their index finger for swiping by placing the golf ball in the center of the screen. While in mid air, the player constantly swipes the ball to add spin. This sets in fatigue, but the gameplay adds a pause as the ball lands, allowing some time for the player to rest in between shots. This uses the swipe mechanic for what it’s best at, and gives the player a chance to rest.

Accelerometer and Gyroscope

Accelerometer control in a ball rolling game.

Ball Rolling style control for accelerometer. Requires two hands, but is intuitive and mimics real life.

Augmented Reality Control can be accomplished with a Gyroscope. This allows the player to hold out the device and move around the real space. This way of control can only be done in specific areas : they can only play in open places which they won’t be embarrassed to be moving around ridiculously.

Accelerometer control keeps fingers off the screen. The player can control the game without the use of fingers, and it allows for the player to play the game with 1 hand (excellent for keeping in the “Subway Thumb” orientation from the previous section).

Easily Discoverable. Players will naturally pick up the device and subtly move the device. you will have to balance easy discoverability with making sure the player can easily control the game. Too sensitive and the game is frustrating, too unsensitive can make the game feel unresponsive and the player will end up tilting their device madly to get the app to do what they want.

Accelerometer as the primary mechanic makes it easy to add a tap mechanic on top for secondary features.

However, precise 2D control is difficult with Accelerometer devices. Playing with the sensitivity will help, but players will still prefer a tap and hold mechanic for precise control over an accelerometer control.

Accelerometer controls suffer from calibration issues. Players won’t always play your game in the same orientation, they want your game to adapt to how they want to play. Even if your game is a ball rolling game, you can’t assume that a user will always play the game looking down on the device. Players will play it in various settings and will want the game to adapt and work in these settings else they won’t play the game. Players can play in bed, on the go, or sitting in a chair, and the default orientation of the device won’t support each of these situations.

Keep the accelerometer movements small. Fatigue along the wrist can occur if the player is controlling the game with one hand and is asked to move constantly side to side. Asking the player to shake constantly in the game play can result in fatigue, avoid continuous shakes. The further and more often the player has to move the device, the less of the screen they see.

While it looks cool to twist your device, don’t expect your user base to hold their device for awhile like this, or feel comfortable doing this in many constrained or public places.
While it looks cool to play like this, don’t expect your user base to hold their device for awhile like this, or feel comfortable doing this in many constrained or public places.

Using the gyroscope control at arms reach can create fatigue after prolonged use. Make sure gameplay is short and doesn’t require huge movements.

On Screen Buttons

It’s inevitable. Eventually you’re going to have to put an on screen button somewhere in your game. The pause button, the power buttons, an advertisement.

It’s important to be vigilant and simplify this as much as possible. On-screen buttons should always be seen as a last resort.

Follow these steps before you commit to an on screen button :

Step 1 : Make the button Adaptable

Canabalt is the ideal : a one button jump technique that allowed the player to use any area on the screen. This allows the mechanic to adapt to the player’s preferences.

Whenever possible, allow the game to adapt to the player’s preference. Instead of having a button for the player to press, allow the player to press wherever they want. Players will press on the screen wherever is most comfortable for them. Making sure this is discoverable is important, but will make your game more accessible.

Instead of a dpad to control the player’s movements left and right, allow the player to tap on the left side of the screen or right hand side of the screen for movement. This translates very well between iPad and iPhones.

Instead of joystick controls stuck in the corner of the screen, allow the player to press down and slide their finger to define the location of the joystick control.

Step 2 : Make them Context Sensitive

Only display a button when the player needs it. This removes/hides elements whenever possible, and will push your players to use these features more often.

For example, if you want the player to use powerups of buffs during the head of gameplay, they can be presented with large buttons for using these powers during opportune times in the game. This will increase usage.

This will also effect the gameplay, if the player is focused on deciding whether or not to press this button, the gameplay around them should not be trying to take their focus away. Make sure the player isn’t required to control another mechanic while a context sensitive button is displayed.

Step 3 : Make them Deliberate

Placing an onscreen button in a awkward area of the screen can prevent accidental clicks and make sure that the player is deliberate when picking this button. Buttons as a requirement should be minimum 45px wide on a standard definition phone, 90px wide on a retina phone. The closer two buttons are together, the easier it is to accidentally tap. So make sure buttons are deliberately placed, appropriately sized for the device, and placed far enough a part that accidental clicks do not happen.

Make it Visceral

The most important part about building a touch mechanic is making it fun. Being visceral is the key to this.

Make the mechanic responsive. Nothing kills a games control mechanics like a poor technical performance in a game.
Make sure the touch mechanics respond at 60 FPS. This will minimize input lag and make the controls feel very responsive. The quicker the feedback and the smoother this feedback is, the more visceral the mechanic will feel.

Angry Birds has a great example of a visceral feeling mechanic. When you pull back the sling shot, the strings change and adjust to your every movement, the sound gives you feedback of how much tension you are using, and it relates to a physical object — In the end it feels like you’re really pulling back on a slingshot.

Give plenty of feedback in the control.

Use animations, trails, sounds and vibration to give your game feel direct feedback to the player. It will make it more intuitive and make the game more enjoyable.

Make it fun to play around with.

All of the great successful games on the AppStore have a touch mechanic that’s a pleasure to play around with, regardless if the levels, puzzles and obstacles were around. If you’re not having fun just by playing with your mechanic, then it won’t be fun when you add all the other stuff.

Take influence from real tactile systems in the real world.

Angry Birds used the feeling of pulling a slingshot for their intuitive, fun and visceral firing mechanic.

Cows vs Aliens used to feeling of pressing down on soft foam as the inspiration of the touch mechanic.

Fruit Ninja used the feeling of slicing to make the player feel like a real ninja.

Take influence from real world objects when designing touch mechanics. It will make them more intuitive, and make them more appealing to your audience.