iOS双摇杆射击游戏的设计原理

移动开发 移动应用
本文原作者是用户体验工作室Vertical Slice的主管雷格汉姆·麦卡里斯特(Graham McAllister),他以一些双摇杆射击游戏为例,详细解析了开发者针对iOS触摸屏移动设备创建这类游戏时需注意的事项。

前不久我们给大家介绍过谷歌旗下的移动广告服务商AdMob三月份关于北美平板电脑生态的一份报告,报告表明游戏是平板电脑的最大用途。今天就给大家介绍一篇关于iOS游戏开发的文章。本文原作者是用户体验工作室Vertical Slice的主管雷格汉姆·麦卡里斯特(Graham McAllister),他以一些双摇杆射击游戏为例,详细解析了开发者针对iOS触摸屏移动设备创建这类游戏时需注意的事项。

什么是双摇杆射击游戏?

图:左侧VJR控制移动方式,右侧VJR执行射击任务 

图:左侧VJR控制移动方式,右侧VJR执行射击任务

双摇杆射击游戏是一种需使用手指操纵两种控制方式的游戏类型,其中一个摇杆负责控制游戏角色的移动,另一个摇杆的作用则是执行射击任务。

这类游戏的摄像视角一般都是直接向下俯视,或者从一个略为倾斜的视角向下俯视。它们基本上是2D游戏,没有前进(或者Z轴线)的动作。

控制方式的布局

动作控制摇杆一般是分布在左侧,但也有些游戏考虑到了左撇子玩家的需求,也会支持玩家对该设置进行调整。这种布局与Xbox 360和PS3平台的双摇杆射击游戏相同。

下图是iPhone游戏《迷你戈尔》(Minigore)的控制设置方式。

图:minigore

图:minigore

不同游戏设置存在区别

虽然触摸屏上仅有两个控制系统,但并非所有的双摇杆射击游戏运行效果都完全相同,游戏设计中的细微差别可能会极大地影响用户体验。

专用术语

目前还没有标准的术语来定义这种触摸控制方式,所以我们尽量用可描述的语言来形容相关操作。

下文将介绍的四个组件都有一个共同的功能,那就是虚拟摇杆区(游戏邦注:the virtual joystick region ,以下简称VJR)。

只要手指接触了这个区域,就算是输入了一个控制动作,如果手指接触的是这个区域外的屏幕,那就不算执行控制操作。

图:红色的核心代表手指在屏幕上的接触点,外围圆圈代表VJR的有限控制区

图:红色的核心代表手指在屏幕上的接触点,外围圆圈代表VJR的有限控制区

#p#四个组件

在开发iOS双摇杆射击游戏之前,有四种主要的控制系统设计可供选择:

1.静态或动态控制方式

2.一直可视的VJR

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

4.靠近屏幕边缘的控制方式

这四个组件可以混搭形成不同的控制设置方式,在介绍它们的各种混搭效果之前,要先分别描述这四者的特点。

首先要强调的是,本文主要以动作控制系统为例进行说明,但射击控制系统的操作也同此理。每一个组件都是针对动作、射击这两个选项的综合设计,下文将分别对此进行说明。

组件1:动态或静态控制方式

静态控制:触摸屏控制系统会设置在iOS设备的固定角落(如下图所示),之后我们还将解释第三种组件“VJR之外的活跃控制方式”是如何延伸静态控制方式的可用性。

图:静态控制:VJR仅显示在屏幕固定位置

图:静态控制:VJR仅显示在屏幕固定位置

动态控制:无论玩家的手指触摸到屏幕的哪个位置,该控制系统都会自动以手指接触面为中心,形成一个VJR。

这正是动态控制方式最为重要的一个特点,这里就会涉及到第二个组件“一直可视的VJR”。

图:动态控制:玩家接触零屏幕任意一点均可形成VJR

图:动态控制:玩家接触零屏幕任意一点均可形成VJR

组件2:一直可视的VJR

动态控制方式有两种显示选项:一直可视方式,或者仅接触可视方式。

一直可视方式:只要玩家动过手指,屏幕上就会一直显示VJR,即使玩家随后松手也是如此。

系统将根据玩家手指接触屏幕的位置,决定是否画出一个新的VJR,还是显示原来的VJR(游戏邦注:我们将在下文中举例详述)。

将VJR设置为一直可视方式时一定要考虑周全,因为玩家松手的时候,屏幕上的VJR仍然存在,他们过后还得将手指准确无误地按在原点,方可避免出现不自然的人物动作,或者摄像角度偏位等现象。

现在就来详细说明玩家手指接触屏幕、松开手指,再次接触屏幕的操作情况。

步骤1:首次接触

假设游戏刚刚开始,玩家的手指是第一次点击屏幕,VJR也是首次显示在屏幕上。

图:以手指接触点为中心画出一个VJR

图:以手指接触点为中心画出一个VJR

步骤2:松开手指

玩家的手指离开屏幕后,VJR会以一直可视方式显示在屏幕上。

图:松开手指后VJR仍在屏幕显示

图:松开手指后VJR仍在屏幕显示

步骤3:再次接触

当玩家的手指第二指接触 屏幕时,会有两种情况发生。

(注:尤其要注意的是第二种情况,它是影响用户体验双摇杆射击游戏的重要原因)

步骤3出现的第一种情况——触摸到VJR之外的区域

如果玩家手指点到了原VJR以上的区域,屏幕就会以手指接触点为中心,形成一个新的VJR。

换句话说,只要新的接触点与原来的VJR之间的距离超过了其半径(如下图所示),那么屏幕上就会自动生成一个新的VJR。

图:接触原VJR以外的区域,会形成一个新的VJR

图:接触原VJR以外的区域,会形成一个新的VJR

步骤3出现的第二种情况——触摸到原VJR范围

在这种情况中,玩家的手指会接触到原VJR范围,会让游戏角色朝相应的方向移动。当然玩家手指也有可能准确无误地触摸到原来的VJR中心点,这时候游戏角色就不会移动,但这种概率非常之低。

这种位置偏移给微调控制带来了极大的困难,同时也是很让玩家抓狂的一个原因。游戏角色的任何一个动作,都导致游戏中的摄像镜头移位。也就意味着这种控制结合方式,不但给微调控制带来了麻烦,而且还会造成摄像镜头的抖动。

玩家想转移方向时经常会遇到这种摄像镜头抖动、无意的动作等烦人的问题,例如,他们原来想往左移,结果手指点触到的却是VJR的右侧。

图:手指接触到偏离VJR中心的区域,可能导致计划外的移动或摄像镜头抖动

图:手指接触到偏离VJR中心的区域,可能导致计划外的移动或摄像镜头抖动

仅接触可视方式:这是一种使用更为普遍的方式,只有手指接触到屏幕时,系统才会显示VJR。

所以假如玩家松开手指时,屏幕上的VJR就会隐藏消失,当他们再次接触时,才会看到一个新的VJR。

这种方式可以保证玩家的手指永远处于VJR的中心,可以为他们提供更舒心和人性化的控制方式。

接下来要说明这种方式的具体操作情况,步骤同上:

步骤1:首次接触

第一次接触时,VJR在屏幕上的显示情况与一直可视方式相同(如下图)。

图:以手指接触点为中心画出一个VJR

图:以手指接触点为中心画出一个VJR

步骤2:松开手指

这个步骤正是它与一直可视方式的最大区别,当玩家手指离开屏幕时,VJR就会隐藏起来。

图:松开手指后VJR就会在屏幕隐藏起来

图:松开手指后VJR就会在屏幕隐藏起来

步骤3:再次接触

由于原来的VJR已被隐藏,所以当玩家手指再次点触时,屏幕上会出现一个以手指接触点为中心的新VJR。这确实是一种更为人性化的控制方式。

图:接触屏幕任意一点均可形成一个新的VJR

图:接触屏幕任意一点均可形成一个新的VJR

以下是一直可视VJR和仅接触可视VJR的优劣对比图:

图:两种可视VJR的优劣比较

图:两种可视VJR的优劣比较

组件3:VJR之外的活跃控制方式

对动态控制来讲,当玩家手指初次接触时,屏幕会自动以手指接触点为中心,形成一个VJR圆环。玩家可以随意变化动作,指引角色向特定的方向移动或射击。

但是只要玩家的手指还没离开屏幕,大多数游戏都有可能会用到VJR之外的控制方式。

也就是说,只要玩家还没松手,这种控制方式就仍然有效,将其拖拽到左侧,角色就会向左移动,但如果松开手指,就得重新定位VJR。

对静态控制方式的影响:玩家的手指只有第一次才需要点触在VJR之内,其他时间可以自由滑过屏幕。但它的VJR之外活跃控制方式的不利之处在于,如果玩家手指离开了屏幕,过后得将其重新定位到屏幕角落的VJR才能生效。

对动态控制方式的影响:对它而言,这种手指“移位”的控制方式对用户体验的影响较小,因为用户松开手指后,可以自由在屏幕上的任何一点重新定位,再画出一个新的VJR。

图:手指移动到VJR之外的区域,仍可执行控制操作

图:手指移动到VJR之外的区域,仍可执行控制操作

组件4:靠近屏幕边缘的控制方式

正如上文所述,如果是在动态控制方式中,玩家手指点击屏幕任何一个地方,都可以生成一个VJR,但也有例外的情况——屏幕边缘。

图:手指接触到屏幕通常都会形成一个完整的VJR

图:手指接触到屏幕通常都会形成一个完整的VJR

屏幕边缘的问题:在多数情况下,当手指接触iOS设备时,屏幕上总有足够的空间生成一个完整的VJR圆环。但假如手指接触点离屏幕边缘极为接近时又会怎样?在这种情况下,屏幕上不会有足够的空间生成一个完整的VJR圆环,所以游戏设计师必须仔细掂量以下两种方法。

方法1:保持完整的VJR

无论玩家接触到靠近屏幕边缘的哪一点,都会在屏幕上画出一个完整的VJR。

图:手指接触到绿色的点,屏幕上还是会出现一个完整的VJR

图:手指接触到绿色的点,屏幕上还是会出现一个完整的VJR

但这种方法的劣势在于,假如玩家点触到靠近左侧边缘的区域,游戏角色就会向左移动,而事实上他们很可能是想向另一个方向移动,或者只是想停止不动。所以这种方法极产生意外的角色移位。

方法2:以接触点为中心的VJR

无论手指接触点是否靠近屏幕边缘,都要以其为中心设置VJR。

图:手指接触到绿色的点,系统就会以该点形成一个VJR

图:手指接触到绿色的点,系统就会以该点形成一个VJR

这种方法比前者更妙,因为它高度吻合玩家的心理预期,换句话说,它的设置更人性化。

它的另一优势在于,游戏角色永远不会向计划外的方向移动,因为这个VJR是以手指接触点为中心,如果它的中心点是无效的,那就不会执行任何操作(如上图所示)。#p#

几种组件混搭效果对比

我们在上文中已经解析了四种组件对双摇杆控制方式的影响,下面就以五款具体的iPad热门双摇杆射击游戏为例,通过对比它们的四种组件混搭效果,判断哪种搭配的玩法体验更胜一筹。

案例1:《Revolt》

图:Revolt-component setup

图:Revolt-component setup

图:Revolt

图:Revolt

如上图所示,它采用的是静态控制方式、一直可视的VJR、支持VJR之外的活跃控制方式、不支持靠近屏幕边缘的控制方式。Vertical Slice工作室对这种组合的可行性评价是3分。

App Store用户对该游戏的一大怨言就是它的控制方式。

在我们看来,采用静态方式难以灵活控制游戏角色的动作,而且还会引起频繁的摄像镜头抖动现象。

如果将其调整为动态控制方式,应该有助于提高用户体验。

案例2:《Max Adventure》

图:Max Adventure-component setup

图:Max Adventure-component setup

图:Max Adventure

图:Max Adventure

它采用动态控制方式、一直可视的VJR、支持VJR之外的活跃控制方式、不支持靠近屏幕边缘的控制方式。Vertical Slice工作室对这种组合的可行性评价是3分。

虽然App Store用户评价并未批评该游戏的控制方式,但它的两种设计仍然会造成计划外的玩家动作。

1.未支持靠近屏幕边缘的控制方式,所以玩家手指接触屏幕边缘的区域时,其角色就会向该方向移动,但他们的本意可能只是想静止不动。

2.该游戏采用了动态控制方式,但却支持一直可视的VJR,这种设计组合比较罕见。这意味着玩家松开手指后,第二次如果点触到原VJR的圆环区内(例如只是想移动一小步),就有可能造成计划外的角色移位。将VJR隐藏起来可以解决这个问题。

案例3:《喵喵欢乐大作战》(Meow Meow Happy Fight HD)

图:Meow Meow Happy Fight HD-componet setup

图:Meow Meow Happy Fight HD-componet setup

图:Meow Meow Happy Fight HD

图:Meow Meow Happy Fight HD

它采用动态控制方式、一直可视的VJR、支持VJR之外的活跃控制方式、不支持靠近屏幕边缘的控制方式。Vertical Slice工作室对这种组合的可行性评价是3分。

它的VJR是个一直可视的小圆核,当手指接触时该圆核会适当扩大。其控制设计的主要问题在于,当玩家松手后重新定位VJR时,很可能向随机性的方向移动,原因是它的小圆核VJR对手指接触的敏感度实在太高了。

如果要解决这个问题,应该围绕这个小圆核设置一个“死亡区”(即非活跃区),以便玩家点触屏幕时生成不必要的动作和移位。

案例4:《僵尸时代》(Age of Zombies)

图:age of zombies-componet setup

图:age of zombies-componet setup

图:age of zombies

图:age of zombies

它采用动态控制方式、仅接触可视的VJR、支持VJR之外的活跃控制方式、不支持靠近屏幕边缘的控制方式。Vertical Slice工作室对这种组合的可行性评价是4分。

这种控制方式非常棒,使用了隐藏起来的动态VJR,所以是一种很舒畅和人性化的游戏设置。

但这种组合并非十全十美,因为它不支持靠近屏幕边缘的控制方式,所以玩家点触到屏幕边缘时,还是可能产生计划外的方向移动或者射击行动。

案例5:《几何战争》(Geometry Wars: Touch)

图:Geometry Wars Touch-componet setup

图:Geometry Wars Touch-componet setup

图:Geometry Wars Touch

图:Geometry Wars Touch

它采用动态控制方式、仅接触可视的VJR、支持VJR之外的活跃控制方式、支持靠近屏幕边缘的控制方式。Vertical Slice工作室对这种组合的可行性评价是5分。

《几何战争》的iPad版控制方式令人惊叹,在四种组件中均择其最优者而行之,所以可以提供非常舒畅、令人满意的用户体验。

顺便一提的是,该游戏的iPhone版本采用的却是静态控制方式,其用户体验并不像iPad版本这样优化。#p#

推荐组合及设计指南

分析了以上数款双摇杆射击游戏后,我们总结出在可用性和用户体验上均达到最理想状态的组合方式为:动态控制方式、仅接触可视的VJR、支持VJR之外的活跃控制方式、支持靠近屏幕边缘的控制方式。

图:理想的组合方式

图:理想的组合方式

这种组合的优势如下:

·消除不必要的玩家移动

·消除摄像镜头颤动现象

·传递人性化的控制方式(符合用户心理预期)

·适应不同大小手指接触位置

虽然我们不能说这种组合就是金科玉律,但相信开发者没有理由不以这种组合方式来设计双摇杆控制游戏。

原文出处

 【编辑推荐】

  1. AdMob:游戏是平板电脑的最大用途
  2. 浅析iOS移动设备用户界面设计11大精粹
  3. iOS与Android平台 最畅销App榜单出炉
  4. 《福布斯》:无心插柳的游戏巨头苹果
  5. 虚幻引擎开发者谈移动游戏

 

责任编辑:佚名 来源: 游戏邦
相关推荐

2016-09-21 09:37:57

2012-04-01 10:02:00

HTML5

2012-12-24 08:59:13

iOSUnity3D

2011-05-04 10:22:27

2012-03-16 09:35:52

HTML 5

2013-05-16 15:08:33

2011-04-29 13:15:16

iOS程序图标iOS图标设计iOS

2012-02-22 08:43:28

苹果iOS游戏设计

2011-04-25 09:30:42

坦克大战Java

2013-07-22 16:10:35

iOS游戏设计营销

2011-05-13 13:35:42

手机游戏游戏营销iOS

2013-05-14 10:05:10

Android开发游戏设计

2013-05-28 09:39:28

游戏设计

2013-06-06 08:40:02

游戏设计

2011-04-29 10:45:56

游戏iPhoneiPad

2020-12-03 06:32:21

STM32单片机通信

2011-08-25 17:54:49

Seige Hero愤怒的小鸟抛物射击游戏

2011-10-09 17:45:06

iOS隐性导航应用设计

2013-06-08 10:29:19

游戏设计

2021-09-08 10:01:14

架构运维技术
点赞
收藏

51CTO技术栈公众号