1、第六章 游戏中的交互界面设计,浙江大学软件学院梁秀波Email：,交互界面概论游戏的可玩性与交互界面交互界面的设计基础人机交互模块交互界面的形式游戏软件的交互界面设计粒子系统实例Cocos2d-x中的界面设计,本章目录,Cocos Studio用户界面编辑器的介绍Cocos Studio用户界面编辑器的使用Cocos2d-x中用户交互游戏界面设计实例贪食豆小结,本章目录,用户界面(User Interface)是人和机器的互动过程(Human-Machine Interaction)中的一个重要层面，它是人与机器之间传递和交换信息的媒介。 游戏中交互界面设计(Game Interface De
2、sign简称GID)，是指对电子游戏中与游戏用户具有交互功能的视觉等实体元素进行布局、规划、导览和切换等，是玩家最直接面对的互动活动，也是玩家对游戏的第一印象。,概论,游戏可玩性的基础是交互界面的可用性。游戏界面的可操作性，包括手眼协调、条件反射和难度递增等，是游戏可玩性的一个基本要素。交互界面的沉浸感是大多数游戏可玩性的共性要素之一。交互界面的操作效率也是游戏可玩性的要素之一。,游戏的可玩性与交互界面,备注： 虽然游戏的创意、设计和情节在很大程度上决定了可玩性，但其技术基础是计算机科学、设计学、心理学和人机交互理论，在表现形式上是通过游戏中的人机活动反映出来。人在玩游戏时，所见所感的是游戏的
3、交互界面，而非游戏的内核技术。只有通过交互界面，玩家才能够控制游戏的内核。因此对游戏来说，交互界面展现了可玩性的大部分。从另外一个角度看，一款游戏的可玩性有不同的体现方式，如飞行模拟类游戏需要大投影屏幕和具有沉浸感的立体眼镜，而回合制战略游戏的界面主要是菜单和图标选择。,色彩设计： 色彩的运用对交互界面的设计至关重要。优秀的色彩搭配是交互界面设计成功的前提和基础。色彩的三要素为： （1） 明度（brightness/lightness），也叫亮度，体现颜色的明暗度； （2）色相（hue），也叫色泽，是色彩的相貌，是区别色彩种类的名称，如红、橙、黄、绿、青等； （3）纯度（saturation）
4、，色彩的纯净程度，又称为彩度或饱和度。,交互界面的设计基础,备注： 色彩是光在人脑中的感觉。光是一种属于一定波长范围内的电磁辐射，当光照射到物体后，物体的反光使人的视觉和大脑产生作用，于是人脑有了色彩的感觉。光照到物体上，一部分被吸收，另一部分被反射，被反射回的光反映了人们看到的物体的颜色。白色的物体之所以为白色，是因为它完全反射了太阳光。黑色的物体之所以为黑色，是因为它完全吸收了光线。自然界中的颜色可以为分非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色。其他色彩可以被划归为彩色。游戏作品给用户的感觉是由整体配色的效果决定的。作品的基调是由配色中占最大面积的色彩决定的，是作品的主色
5、调。通过简单地审视一些游戏界面的色彩运用，可以体验到色彩设计的魅力。,图形用户界面（Graphics User Interface，GUI）是以视觉感知通道为主的人机界面。在PC平台上最重要和最普及的图形用户界面是WIMP（Window Icon Menu Pointing，窗口、图标、菜单、鼠标）界面。在WIMP界面之后，经历了各种以其他感知通道为主的界面方式，如头盔、立体眼镜、语音、视频、手势、眼神、数据手套（触觉）等多维、多通道、多尺度感知设备和处理方式。,交互界面的设计基础,交互界面设计中的问题：（1）信息的输出 即如何将系统信息和状态明白无误地通知用户，对于游戏来说，游戏越复杂，需要
6、给玩家的信息也就越多，如即时战略、角色扮演和大型网络游戏的各种角色状态、武器装备、全局的数据统计等。这些游戏的内部状态或数据都需要井井有条地显示给玩家，否则玩家无法做出正确的判断。,交互界面的设计基础,（2）信息输入 即如何提供用户发布正确的输入指令的渠道。游戏玩家的输入手段主要包括以下三类： 1) 菜单：可分为固定式菜单、下拉式菜单、弹出式菜单三种。 2) 图标：形象地传递信息量。有的图标只是起到提示作用，有的图标是文字按钮的图形化，每个图标对应一项功能。 3) 快捷键：即键盘字母组合方式构成的指令发布方式。快捷键的使用能极大地提高速度，有些快捷键甚至能提供作弊模式。,交互界面的设计基础,人
7、机交互模块,交互界面的形式： 命令语言界面、菜单界面、自然语言界面、姿势识别界面、基于运动传感的直观自然交互界面、基于Kinect 的3D体感交互界面。,交互界面的形式,命令语言界面（Command） 命令语言界面是最早使用，也是最流行的一种人机界面形式。界面由用户命令驱动，计算机读取用户命令来执行用户的意图。20世纪90年代中期流行的MUD（Multi User Dimension，俗称泥巴）游戏就是一种纯文字界面，如右图所示。,交互界面的形式,菜单界面 菜单界面是图形用户界面的典型代表, 可以把类似的功能集中到一个菜单项中，无形中方便了用户的记忆和查找。菜单界面使用户可以在很短的时间内熟悉
8、一款游戏或软件的使用方法，特别是依赖于菜单进行信息交流的回合制游戏。,交互界面的形式,自然语言界面 自然语言比命令语言更符合使用者的语言习惯。但自然语言非常复杂，不仅包含语音、语义，还包含语义的延伸及其多重性，使得自然语言界面的实现十分困难。典型的自然语言界面是语音输入，如右图所示，但目前还没有一款完全以自然语言界面为基础的流行游戏。,交互界面的形式,姿势识别界面 姿势识别界面大体上分为两种。一种使用摄像机捕获人的手势、眼神、鼻、笑容或其他肢体动作，进而控制计算机。第二种是使用计算机的数据笔（stylus）和三维鼠标，根据一段时间内的移动轨迹和速度决定操作命令，典型的例子是数据笔在手写输入屏上
9、书写汉字。,交互界面的形式,基于运动传感的直观自然交互界面 直到基于运动传感的Wii游戏机的出现, 带来了的颠覆性的游戏操作方式和体验能让玩家在游戏中不自觉地根据游戏做出各种动作，进行全身运动。右图给出了一个基于Wii手柄的游戏交互场景实例。,交互界面的形式,基于Kinect 的3D体感交互界面 Kinect是微软基于以色列PrimeSense的技术开发而成，作为 Xbox 360游戏机的外设，它让玩家不需要手持游戏手柄，而是使用语音指令或身体动作进行游戏。右图为Kinect的构造示意图。,交互界面的形式,游戏的界面设计与游戏的类型、整体风格联系十分紧密，一般构造用户界面时，需遵循以下基本原则
10、：1）一致性原则2）提供出错反馈3）保持界面简洁4）提供帮助和向导功能5）减少用户的记忆量,游戏软件的交互界面设计,（1）一致性原则一致性原则是指用户界面的设计应该遵从某种一致的约定，但这也是经常被违反的一个原则。在一个软件中，应该要求其概念模式、语言、语法及显示格式等的一致性；在类似的情况下具有一致的操作系列；在提示、帮助和菜单中产生相同的术语。例如，Windows 的办公系列软件具备高度的一致性原则。一致性原则可以帮助用户在熟悉一款游戏后，能快速熟悉掌握另一款相似或后继版本的游戏，如Quake系列和Doom系列游戏。（2）提供出错反馈用户无法容忍一款游戏出现错误，也无法容忍一款游戏莫名其妙
11、地崩溃。软件出错可能是一个永恒的话题，但良好的用户界面设计会将错误信息反馈给用户，让用户决定下一步操作。（3）保持界面简洁可以想象，一款布满密密麻麻的菜单和控件的游戏会让玩家顿生恐惧。简洁高效的界面可以突出一些关键的控件，改善可用性。另外，排列整齐、行距一致也可以使软件的界面显得清晰明了。用户界面的简洁也应该符合美学上的原则，即简约美。当然，界面简洁并不代表要削减功能，通过仔细的设计完全可以达到界面简洁与功能强大的平衡。（4）提供帮助和向导功能很难想象，一款游戏可以让用户一上手就立即会使用。即使对这个软件非常熟悉的用户也不可能保证不会在使用过程中出错。健忘、易出错是人的固有弱点，因此，提供帮助
12、功能可以帮助用户更好地使用软件。软件可能被各种不同水平的用户使用。帮助功能应该考虑到专家型用户和普通型用户的不同需求。（5）减少用户的记忆量软件设计的一个目标是易用性。减少用户的记忆量，是一个设计良好的软件的基本要求。在各种可能的场合，对用户尽可能多地提醒也是软件人性化的要求。,CocosStudio工具集所设计的功能十分全面，就UI编辑部分，在CocosStudio中就包含了多达14种控件类型，包括按钮、复选框、精灵、图片、数字标签、自定义字体、进度条、滑动条、文本框、输入框、层容器、滚动层容器、列表层容器、分页层容器，涵盖了UI界面制作常见控件类型。,Cocos2d-x中的界面设计,Coc
13、os2d-x中的界面设计,Cocos2d-x工具集Cocos StudioUI Editor,Cocos Studio用户界面编辑器的介绍,编辑器布局,面板列表：渲染面板对象结构面板UI动画列表面板关键帧面板属性面板资源面板画布列表面板输出面板控件面板预览面板菜单栏快捷工具栏状态栏,Cocos Studio用户界面编辑器的介绍,渲染面板是编辑器的核心面板，所有的效果都需要在渲染区来查看。,作为所见即所得编辑器，渲染面板会实时更新所有的控件以及控件的属性。在渲染面板中所呈现的内容将和游戏中的最终呈现效果是一致的。,渲染界面,Cocos Studio用户界面编辑器的介绍,对象结构面板是用来显示画布
14、中所有控件的一个列表。 列表中不仅列举了所有的控件，还通过缩进描述了控件之间的关系，在对控件做管理的时候将会更加方便。,对象结构面板,Cocos Studio用户界面编辑器的介绍,UI动画主要是针对界面上的控件做一些复合的属性变化，通过简单的属性设置就能够实现很多动画效果，对于程序来说往往这部分占用了大量的时间。注意：这个面板只有在动画模式下才会显示。,UI动画面板,Cocos Studio用户界面编辑器的介绍,通用属性： 通用属性指每一个控件都包括的属性，包括常规的位置、大小、翻转等。这部分属性需要熟练掌握并灵活应用。特性: 每一个控件的产生都有其特殊的用途，那么每一个控件都包含一些其他控件
15、所不包含的特殊属性。,属性面板,Cocos Studio用户界面编辑器的介绍,资源面板是对资源的一种管理窗口，对于一个项目来说资源是非常重要的。以Resources文件夹为根合理的文件夹划分命名使用英文字母,资源面板,Cocos Studio用户界面编辑器的介绍,画布是来管理同一个项目中的多个界面的。每一个界面之间是相互独立，互不影响的。,画布列表面板,Cocos Studio用户界面编辑器的介绍,输出面板输出日志信息，帮助我们查找编辑时遇到的问题控件面板所有控件的列表预览面板预览图片菜单栏常用操作菜单快捷菜单一些便捷工具状态栏显示状态信息,其他面板,Cocos Studio用户界面编辑器的使
16、用,1.创建项目 打开CocosStudio,选择UI Editor，在界面中选择文件-新建即可创建一个新项目，在界面的左上角显示的是画布大小，可以调整，这里我们设置为960x640。创建好后出现如下界面。,Cocos Studio用户界面编辑器的使用,2.导入资源 在新创建项目的资源面板点击鼠标右键即可导入资源，本例中导入的按钮正常状态和点击状态所需要的图片资源btn_animation.png和btn_animation_select.png，导入后资源面板状态如图所示。,Cocos Studio用户界面编辑器的使用,3.构建UI界面 在控件区拖放一个按钮控件放到渲染窗口的合适位置，选中按
17、钮后可以在属性窗口中看到按钮的各种属性，把属性中的“名字”更改为“btn_animation”，“Tag”设置为5，“文本”更改为“animation”，“文本”的颜色设置为“Orange”，大小设置为21，如图所示。,Cocos Studio用户界面编辑器的使用,最后将资源区的图片btn_animation.png，btn_animation_select.png分别拖放到按钮属性中的“正常状态”和“按下状态”框中，此时按钮制作完成，如图所示。,Cocos Studio用户界面编辑器的使用,4.导出项目 选择文件-导出项目 按默认参数即可导出项目，按提示存储位置可以找到发布文件夹publis
18、h，文件结构如图所示，需要使用时将所有文件放在同一路径即可。,Cocos2d-x中的用户交互,EventListener的继承关系,Cocos2d-x中的用户交互,触摸事件 在Cocos2d-x中，可以为任意一个游戏元素添加接收事件，Cocos2d-x中的Layer提供了很好的技术支持。Layer类封装了触摸输入的接口，用于接收输入事件。Layer类中还可以使用setTouchEnabled方法来打开或着关闭接收触摸的输入。单点触摸事件(EventListenerTouchOneByOne)多点触摸事件(EventListenerTouchAllAtOnce),Cocos2d-x中的用户交互,
19、按键事件(EventListenerKeyboard) EventListenerKeyboard对象表示按键事件监听器。键盘事件的响应函数有2个：*void onKeyPressed(EventKeyboard:KeyCode keyCode,Event event);/键按下*void onKeyReleased(EventKeyboard:KeyCode keyCode,Event event);/键弹起,Cocos2d-x中的用户交互,鼠标事件(EventListenerMouse ) EventListenerMouse对象表示鼠标事件监听器，鼠标事件监听器的响应函数有4个：*voi
20、d onMouseDown(Event *event);*void onMouseUp(Event *event);*void onMouseMove(Event *event);*void onMouseScroll(Event *event);,Cocos2d-x中的用户交互,加速度计事件(EventListenerAcceleration) EventListenerAcceleration对象表示加速度计监听器，加速度计操作在游戏中的应用也很频繁，例如：赛车游戏中通过摇动手机来控制赛车方向等。其响应函数只有1个：void on Acceleration(Acceleration* ac
21、c,Event* event);,Cocos2d-x中的用户交互,自定义事件(EventListenerCustom) 自定义事件，其触发是需要人为干涉的，而不是由系统自动触发。创建方式如下：Static EventListenerCustom* create(const std:string,游戏界面设计实例贪食豆,游戏简介： 本例中实现的是一个简单的通过摇杆控制主角移动的交互界面，使用到了第六章中用过的一个摇杆类来控制一个小豆子来“吃到”彩色小球。操作简单，只要使用摇杆的方向来控制小豆子“吃到”小球即可。,游戏界面设计实例贪食豆,游戏实现步骤： 封装一个摇杆Joystick类 初始化主角和
22、小球 规定好游戏的规则 在场景中展现出来 （注：具体实现细节参考实验手册）,游戏界面设计实例贪食豆,游戏最终效果：,本章介绍了游戏中的交互界面设计的相关概念，分析了游戏的可玩性，简要地阐述了人机交互的概念，并介绍了用户界面设计基础、以及游戏的交互界面设计以及开发的一些基本原则。 基于Cocos2d-x引擎，着重介绍了CocosStudio中的UI编辑器。考虑到界面元素如何与用户交互的问题，可以将用户交互事件分为触屏事件、按键事件、鼠标事件、加速度计事件与自定义事件5大类。对于每一种交互事件，Cocos2d-x都内置了对应的事件处理函数供开发者调用。最后，通过一个游戏实例来演示用户界面的创建和用户事件的处理。,小结,
