前不久我們給大家介紹過(guò)谷歌旗下的移動(dòng)廣告服務(wù)商AdMob三月份關(guān)于北美平板電腦生態(tài)的一份報(bào)告，報(bào)告表明游戲是平板電腦的最大用途。今天就給大家介紹一篇關(guān)于iOS游戲開(kāi)發(fā)的文章。本文原作者是用戶體驗(yàn)工作室Vertical Slice的主管雷格漢姆·麥卡里斯特（Graham McAllister），他以一些雙搖桿射擊游戲?yàn)槔?，詳?xì)解析了開(kāi)發(fā)者針對(duì)iOS觸摸屏移動(dòng)設(shè)備創(chuàng)建這類游戲時(shí)需注意的事項(xiàng)。

什么是雙搖桿射擊游戲？

圖：左側(cè)VJR控制移動(dòng)方式，右側(cè)VJR執(zhí)行射擊任務(wù)

雙搖桿射擊游戲是一種需使用手指操縱兩種控制方式的游戲類型，其中一個(gè)搖桿負(fù)責(zé)控制游戲角色的移動(dòng)，另一個(gè)搖桿的作用則是執(zhí)行射擊任務(wù)。

這類游戲的攝像視角一般都是直接向下俯視，或者從一個(gè)略為傾斜的視角向下俯視。它們基本上是2D游戲，沒(méi)有前進(jìn)（或者Z軸線）的動(dòng)作。

控制方式的布局

動(dòng)作控制搖桿一般是分布在左側(cè)，但也有些游戲考慮到了左撇子玩家的需求，也會(huì)支持玩家對(duì)該設(shè)置進(jìn)行調(diào)整。這種布局與Xbox 360和PS3平臺(tái)的雙搖桿射擊游戲相同。

下圖是iPhone游戲《迷你戈?duì)枴罚∕inigore）的控制設(shè)置方式。

圖：minigore

不同游戲設(shè)置存在區(qū)別

雖然觸摸屏上僅有兩個(gè)控制系統(tǒng)，但并非所有的雙搖桿射擊游戲運(yùn)行效果都完全相同，游戲設(shè)計(jì)中的細(xì)微差別可能會(huì)極大地影響用戶體驗(yàn)。

專用術(shù)語(yǔ)

目前還沒(méi)有標(biāo)準(zhǔn)的術(shù)語(yǔ)來(lái)定義這種觸摸控制方式，所以我們盡量用可描述的語(yǔ)言來(lái)形容相關(guān)操作。

下文將介紹的四個(gè)組件都有一個(gè)共同的功能，那就是虛擬搖桿區(qū)（游戲邦注：the virtual joystick region ，以下簡(jiǎn)稱VJR）。

只要手指接觸了這個(gè)區(qū)域，就算是輸入了一個(gè)控制動(dòng)作，如果手指接觸的是這個(gè)區(qū)域外的屏幕，那就不算執(zhí)行控制操作。

圖：紅色的核心代表手指在屏幕上的接觸點(diǎn)，外圍圓圈代表VJR的有限控制區(qū)

#p#四個(gè)組件

在開(kāi)發(fā)iOS雙搖桿射擊游戲之前，有四種主要的控制系統(tǒng)設(shè)計(jì)可供選擇：

1.靜態(tài)或動(dòng)態(tài)控制方式

2.一直可視的VJR

3.VJR之外的活躍控制方式

4.靠近屏幕邊緣的控制方式

這四個(gè)組件可以混搭形成不同的控制設(shè)置方式，在介紹它們的各種混搭效果之前，要先分別描述這四者的特點(diǎn)。

首先要強(qiáng)調(diào)的是，本文主要以動(dòng)作控制系統(tǒng)為例進(jìn)行說(shuō)明，但射擊控制系統(tǒng)的操作也同此理。每一個(gè)組件都是針對(duì)動(dòng)作、射擊這兩個(gè)選項(xiàng)的綜合設(shè)計(jì)，下文將分別對(duì)此進(jìn)行說(shuō)明。

組件1：動(dòng)態(tài)或靜態(tài)控制方式

靜態(tài)控制：觸摸屏控制系統(tǒng)會(huì)設(shè)置在iOS設(shè)備的固定角落（如下圖所示），之后我們還將解釋第三種組件“VJR之外的活躍控制方式”是如何延伸靜態(tài)控制方式的可用性。

圖：靜態(tài)控制：VJR僅顯示在屏幕固定位置

動(dòng)態(tài)控制：無(wú)論玩家的手指觸摸到屏幕的哪個(gè)位置，該控制系統(tǒng)都會(huì)自動(dòng)以手指接觸面為中心，形成一個(gè)VJR。

這正是動(dòng)態(tài)控制方式最為重要的一個(gè)特點(diǎn)，這里就會(huì)涉及到第二個(gè)組件“一直可視的VJR”。

圖：動(dòng)態(tài)控制：玩家接觸零屏幕任意一點(diǎn)均可形成VJR

組件2：一直可視的VJR

動(dòng)態(tài)控制方式有兩種顯示選項(xiàng)：一直可視方式，或者僅接觸可視方式。

一直可視方式：只要玩家動(dòng)過(guò)手指，屏幕上就會(huì)一直顯示VJR，即使玩家隨后松手也是如此。

系統(tǒng)將根據(jù)玩家手指接觸屏幕的位置，決定是否畫(huà)出一個(gè)新的VJR，還是顯示原來(lái)的VJR（游戲邦注：我們將在下文中舉例詳述）。

將VJR設(shè)置為一直可視方式時(shí)一定要考慮周全，因?yàn)橥婕宜墒值臅r(shí)候，屏幕上的VJR仍然存在，他們過(guò)后還得將手指準(zhǔn)確無(wú)誤地按在原點(diǎn)，方可避免出現(xiàn)不自然的人物動(dòng)作，或者攝像角度偏位等現(xiàn)象。

現(xiàn)在就來(lái)詳細(xì)說(shuō)明玩家手指接觸屏幕、松開(kāi)手指，再次接觸屏幕的操作情況。

步驟1：首次接觸

假設(shè)游戲剛剛開(kāi)始，玩家的手指是第一次點(diǎn)擊屏幕，VJR也是首次顯示在屏幕上。

圖：以手指接觸點(diǎn)為中心畫(huà)出一個(gè)VJR

步驟2：松開(kāi)手指

玩家的手指離開(kāi)屏幕后，VJR會(huì)以一直可視方式顯示在屏幕上。

圖：松開(kāi)手指后VJR仍在屏幕顯示

步驟3：再次接觸

當(dāng)玩家的手指第二指接觸 屏幕時(shí)，會(huì)有兩種情況發(fā)生。

（注：尤其要注意的是第二種情況，它是影響用戶體驗(yàn)雙搖桿射擊游戲的重要原因）

步驟3出現(xiàn)的第一種情況——觸摸到VJR之外的區(qū)域

如果玩家手指點(diǎn)到了原VJR以上的區(qū)域，屏幕就會(huì)以手指接觸點(diǎn)為中心，形成一個(gè)新的VJR。

換句話說(shuō)，只要新的接觸點(diǎn)與原來(lái)的VJR之間的距離超過(guò)了其半徑（如下圖所示），那么屏幕上就會(huì)自動(dòng)生成一個(gè)新的VJR。

圖：接觸原VJR以外的區(qū)域，會(huì)形成一個(gè)新的VJR

步驟3出現(xiàn)的第二種情況——觸摸到原VJR范圍

在這種情況中，玩家的手指會(huì)接觸到原VJR范圍，會(huì)讓游戲角色朝相應(yīng)的方向移動(dòng)。當(dāng)然玩家手指也有可能準(zhǔn)確無(wú)誤地觸摸到原來(lái)的VJR中心點(diǎn)，這時(shí)候游戲角色就不會(huì)移動(dòng)，但這種概率非常之低。

這種位置偏移給微調(diào)控制帶來(lái)了極大的困難，同時(shí)也是很讓玩家抓狂的一個(gè)原因。游戲角色的任何一個(gè)動(dòng)作，都導(dǎo)致游戲中的攝像鏡頭移位。也就意味著這種控制結(jié)合方式，不但給微調(diào)控制帶來(lái)了麻煩，而且還會(huì)造成攝像鏡頭的抖動(dòng)。

玩家想轉(zhuǎn)移方向時(shí)經(jīng)常會(huì)遇到這種攝像鏡頭抖動(dòng)、無(wú)意的動(dòng)作等煩人的問(wèn)題，例如，他們?cè)瓉?lái)想往左移，結(jié)果手指點(diǎn)觸到的卻是VJR的右側(cè)。

圖：手指接觸到偏離VJR中心的區(qū)域，可能導(dǎo)致計(jì)劃外的移動(dòng)或攝像鏡頭抖動(dòng)

僅接觸可視方式：這是一種使用更為普遍的方式，只有手指接觸到屏幕時(shí)，系統(tǒng)才會(huì)顯示VJR。

所以假如玩家松開(kāi)手指時(shí)，屏幕上的VJR就會(huì)隱藏消失，當(dāng)他們?cè)俅谓佑|時(shí)，才會(huì)看到一個(gè)新的VJR。

這種方式可以保證玩家的手指永遠(yuǎn)處于VJR的中心，可以為他們提供更舒心和人性化的控制方式。

接下來(lái)要說(shuō)明這種方式的具體操作情況，步驟同上：

步驟1：首次接觸

第一次接觸時(shí)，VJR在屏幕上的顯示情況與一直可視方式相同（如下圖）。

圖：以手指接觸點(diǎn)為中心畫(huà)出一個(gè)VJR

步驟2：松開(kāi)手指

這個(gè)步驟正是它與一直可視方式的最大區(qū)別，當(dāng)玩家手指離開(kāi)屏幕時(shí)，VJR就會(huì)隱藏起來(lái)。

圖：松開(kāi)手指后VJR就會(huì)在屏幕隱藏起來(lái)

步驟3：再次接觸

由于原來(lái)的VJR已被隱藏，所以當(dāng)玩家手指再次點(diǎn)觸時(shí)，屏幕上會(huì)出現(xiàn)一個(gè)以手指接觸點(diǎn)為中心的新VJR。這確實(shí)是一種更為人性化的控制方式。

圖：接觸屏幕任意一點(diǎn)均可形成一個(gè)新的VJR

以下是一直可視VJR和僅接觸可視VJR的優(yōu)劣對(duì)比圖：

圖：兩種可視VJR的優(yōu)劣比較

組件3：VJR之外的活躍控制方式

對(duì)動(dòng)態(tài)控制來(lái)講，當(dāng)玩家手指初次接觸時(shí)，屏幕會(huì)自動(dòng)以手指接觸點(diǎn)為中心，形成一個(gè)VJR圓環(huán)。玩家可以隨意變化動(dòng)作，指引角色向特定的方向移動(dòng)或射擊。

但是只要玩家的手指還沒(méi)離開(kāi)屏幕，大多數(shù)游戲都有可能會(huì)用到VJR之外的控制方式。

也就是說(shuō)，只要玩家還沒(méi)松手，這種控制方式就仍然有效，將其拖拽到左側(cè)，角色就會(huì)向左移動(dòng)，但如果松開(kāi)手指，就得重新定位VJR。

對(duì)靜態(tài)控制方式的影響：玩家的手指只有第一次才需要點(diǎn)觸在VJR之內(nèi)，其他時(shí)間可以自由滑過(guò)屏幕。但它的VJR之外活躍控制方式的不利之處在于，如果玩家手指離開(kāi)了屏幕，過(guò)后得將其重新定位到屏幕角落的VJR才能生效。

對(duì)動(dòng)態(tài)控制方式的影響：對(duì)它而言，這種手指“移位”的控制方式對(duì)用戶體驗(yàn)的影響較小，因?yàn)橛脩羲砷_(kāi)手指后，可以自由在屏幕上的任何一點(diǎn)重新定位，再畫(huà)出一個(gè)新的VJR。

圖：手指移動(dòng)到VJR之外的區(qū)域，仍可執(zhí)行控制操作

組件4：靠近屏幕邊緣的控制方式

正如上文所述，如果是在動(dòng)態(tài)控制方式中，玩家手指點(diǎn)擊屏幕任何一個(gè)地方，都可以生成一個(gè)VJR，但也有例外的情況——屏幕邊緣。

圖：手指接觸到屏幕通常都會(huì)形成一個(gè)完整的VJR

屏幕邊緣的問(wèn)題：在多數(shù)情況下，當(dāng)手指接觸iOS設(shè)備時(shí)，屏幕上總有足夠的空間生成一個(gè)完整的VJR圓環(huán)。但假如手指接觸點(diǎn)離屏幕邊緣極為接近時(shí)又會(huì)怎樣？在這種情況下，屏幕上不會(huì)有足夠的空間生成一個(gè)完整的VJR圓環(huán)，所以游戲設(shè)計(jì)師必須仔細(xì)掂量以下兩種方法。

方法1：保持完整的VJR

無(wú)論玩家接觸到靠近屏幕邊緣的哪一點(diǎn)，都會(huì)在屏幕上畫(huà)出一個(gè)完整的VJR。

圖：手指接觸到綠色的點(diǎn)，屏幕上還是會(huì)出現(xiàn)一個(gè)完整的VJR

但這種方法的劣勢(shì)在于，假如玩家點(diǎn)觸到靠近左側(cè)邊緣的區(qū)域，游戲角色就會(huì)向左移動(dòng)，而事實(shí)上他們很可能是想向另一個(gè)方向移動(dòng)，或者只是想停止不動(dòng)。所以這種方法極產(chǎn)生意外的角色移位。

方法2：以接觸點(diǎn)為中心的VJR

無(wú)論手指接觸點(diǎn)是否靠近屏幕邊緣，都要以其為中心設(shè)置VJR。

圖：手指接觸到綠色的點(diǎn)，系統(tǒng)就會(huì)以該點(diǎn)形成一個(gè)VJR

這種方法比前者更妙，因?yàn)樗叨任呛贤婕业男睦眍A(yù)期，換句話說(shuō)，它的設(shè)置更人性化。

它的另一優(yōu)勢(shì)在于，游戲角色永遠(yuǎn)不會(huì)向計(jì)劃外的方向移動(dòng)，因?yàn)檫@個(gè)VJR是以手指接觸點(diǎn)為中心，如果它的中心點(diǎn)是無(wú)效的，那就不會(huì)執(zhí)行任何操作（如上圖所示）。#p#

幾種組件混搭效果對(duì)比

我們?cè)谏衔闹幸呀?jīng)解析了四種組件對(duì)雙搖桿控制方式的影響，下面就以五款具體的iPad熱門(mén)雙搖桿射擊游戲?yàn)槔ㄟ^(guò)對(duì)比它們的四種組件混搭效果，判斷哪種搭配的玩法體驗(yàn)更勝一籌。

案例1：《Revolt》

圖：Revolt-component setup

圖：Revolt

如上圖所示，它采用的是靜態(tài)控制方式、一直可視的VJR、支持VJR之外的活躍控制方式、不支持靠近屏幕邊緣的控制方式。Vertical Slice工作室對(duì)這種組合的可行性評(píng)價(jià)是3分。

App Store用戶對(duì)該游戲的一大怨言就是它的控制方式。

在我們看來(lái)，采用靜態(tài)方式難以靈活控制游戲角色的動(dòng)作，而且還會(huì)引起頻繁的攝像鏡頭抖動(dòng)現(xiàn)象。

如果將其調(diào)整為動(dòng)態(tài)控制方式，應(yīng)該有助于提高用戶體驗(yàn)。

案例2：《Max Adventure》

圖：Max Adventure-component setup

圖：Max Adventure

它采用動(dòng)態(tài)控制方式、一直可視的VJR、支持VJR之外的活躍控制方式、不支持靠近屏幕邊緣的控制方式。Vertical Slice工作室對(duì)這種組合的可行性評(píng)價(jià)是3分。

雖然App Store用戶評(píng)價(jià)并未批評(píng)該游戲的控制方式，但它的兩種設(shè)計(jì)仍然會(huì)造成計(jì)劃外的玩家動(dòng)作。

1.未支持靠近屏幕邊緣的控制方式，所以玩家手指接觸屏幕邊緣的區(qū)域時(shí)，其角色就會(huì)向該方向移動(dòng)，但他們的本意可能只是想靜止不動(dòng)。

2.該游戲采用了動(dòng)態(tài)控制方式，但卻支持一直可視的VJR，這種設(shè)計(jì)組合比較罕見(jiàn)。這意味著玩家松開(kāi)手指后，第二次如果點(diǎn)觸到原VJR的圓環(huán)區(qū)內(nèi)（例如只是想移動(dòng)一小步），就有可能造成計(jì)劃外的角色移位。將VJR隱藏起來(lái)可以解決這個(gè)問(wèn)題。

案例3：《喵喵歡樂(lè)大作戰(zhàn)》（Meow Meow Happy Fight HD）

圖：Meow Meow Happy Fight HD-componet setup

圖：Meow Meow Happy Fight HD

它采用動(dòng)態(tài)控制方式、一直可視的VJR、支持VJR之外的活躍控制方式、不支持靠近屏幕邊緣的控制方式。Vertical Slice工作室對(duì)這種組合的可行性評(píng)價(jià)是3分。

它的VJR是個(gè)一直可視的小圓核，當(dāng)手指接觸時(shí)該圓核會(huì)適當(dāng)擴(kuò)大。其控制設(shè)計(jì)的主要問(wèn)題在于，當(dāng)玩家松手后重新定位VJR時(shí)，很可能向隨機(jī)性的方向移動(dòng)，原因是它的小圓核VJR對(duì)手指接觸的敏感度實(shí)在太高了。

如果要解決這個(gè)問(wèn)題，應(yīng)該圍繞這個(gè)小圓核設(shè)置一個(gè)“死亡區(qū)”（即非活躍區(qū)），以便玩家點(diǎn)觸屏幕時(shí)生成不必要的動(dòng)作和移位。

案例4：《僵尸時(shí)代》（Age of Zombies）

圖：age of zombies-componet setup

圖：age of zombies

它采用動(dòng)態(tài)控制方式、僅接觸可視的VJR、支持VJR之外的活躍控制方式、不支持靠近屏幕邊緣的控制方式。Vertical Slice工作室對(duì)這種組合的可行性評(píng)價(jià)是4分。

這種控制方式非常棒，使用了隱藏起來(lái)的動(dòng)態(tài)VJR，所以是一種很舒暢和人性化的游戲設(shè)置。

但這種組合并非十全十美，因?yàn)樗恢С挚拷聊贿吘壍目刂品绞剑酝婕尹c(diǎn)觸到屏幕邊緣時(shí)，還是可能產(chǎn)生計(jì)劃外的方向移動(dòng)或者射擊行動(dòng)。

案例5：《幾何戰(zhàn)爭(zhēng)》（Geometry Wars: Touch）

圖：Geometry Wars Touch-componet setup

圖：Geometry Wars Touch

它采用動(dòng)態(tài)控制方式、僅接觸可視的VJR、支持VJR之外的活躍控制方式、支持靠近屏幕邊緣的控制方式。Vertical Slice工作室對(duì)這種組合的可行性評(píng)價(jià)是5分。

《幾何戰(zhàn)爭(zhēng)》的iPad版控制方式令人驚嘆，在四種組件中均擇其最優(yōu)者而行之，所以可以提供非常舒暢、令人滿意的用戶體驗(yàn)。

順便一提的是，該游戲的iPhone版本采用的卻是靜態(tài)控制方式，其用戶體驗(yàn)并不像iPad版本這樣優(yōu)化。#p#

推薦組合及設(shè)計(jì)指南

分析了以上數(shù)款雙搖桿射擊游戲后，我們總結(jié)出在可用性和用戶體驗(yàn)上均達(dá)到最理想狀態(tài)的組合方式為：動(dòng)態(tài)控制方式、僅接觸可視的VJR、支持VJR之外的活躍控制方式、支持靠近屏幕邊緣的控制方式。

圖：理想的組合方式

這種組合的優(yōu)勢(shì)如下：

·消除不必要的玩家移動(dòng)

·消除攝像鏡頭顫動(dòng)現(xiàn)象

·傳遞人性化的控制方式（符合用戶心理預(yù)期）

·適應(yīng)不同大小手指接觸位置

雖然我們不能說(shuō)這種組合就是金科玉律，但相信開(kāi)發(fā)者沒(méi)有理由不以這種組合方式來(lái)設(shè)計(jì)雙搖桿控制游戲。

原文出處

 【編輯推薦】

1. AdMob：游戲是平板電腦的最大用途
2. 淺析iOS移動(dòng)設(shè)備用戶界面設(shè)計(jì)11大精粹
3. iOS與Android平臺(tái) 最暢銷App榜單出爐
4. 《福布斯》：無(wú)心插柳的游戲巨頭蘋(píng)果
5. 虛幻引擎開(kāi)發(fā)者談移動(dòng)游戲