chapter6 游戏界面设计

Cocos2d-x中的用户交互
EventListener的继承关系
Cocos2d-x中的用户交互
• 触摸事件 在Cocos2d-x中，可以为任意一个游戏元素添加接收事件， Cocos2d-x中的Layer提供了很好的技术支持。Layer类封装了 触摸输入的接口，用于接收输入事件。Layer类中还可以使用 setTouchEnabled方法来打开或着关闭接收触摸的输入。 •单点触摸事件(EventListenerTouchOneByOne) •多点触摸事件(EventListenerTouchAllAtOnce)
游戏软件的交互界面设计
游戏的界面设计与游戏的类型、整体风格联系十分紧密， 一般构造用户界面时，需遵循以下基本原则：
1）一致性原则 2）提供出错反馈 3）保持界面简洁 4）提供帮助和向导功能 5）减少用户的记忆量
Cocos2d-x中的界面设计
CocosStudio工具集所设计的功能十分全面，就UI编辑部
*void onKeyReleased(EventKeyboard::KeyCode
keyCode,Event event);//键弹起
Cocos2d-x中的用户交互
• 鼠标事件(EventListenerMouse )
EventListenerMouse对象表示鼠标事件监听器，鼠标事
件监听器的响应函数有4个：
*void onMouseDown(Event *event);
*void onMouseUp(Event *event);
*void onMouseMove(Event *event);
*void onMouseScroll(Event *event);
Cocos2d-x中的用户交互
视频、手势、眼神、数据手套（触觉）等多维、多通道、多尺
度感知设备和处理方式。
交互界面的设计基础 • 交互界面设计中的问题：
（1）信息的输出
即如何将系统信息和状态明白无误地通知用户，对于游
戏来说，游戏越复杂，需要给玩家的信息也就越多，如即时
战略、角色扮演和大型网络游戏的各种角色状态、武器装备、
全局的数据统计等。这些游戏的内部状态或数据都需要井井
Cocos Studio用户界面编辑器的介绍
• 编辑器布局
面板列表： 1. 渲染面板 2. 对象结构面板 3. UI动画列表面板 4. 关键帧面板 5. 属性面板 6. 资源面板 7. 画布列表面板 8. 输出面板 9. 控件面板 10. 预览面板 11. 菜单栏 12. 快捷工具栏 13. 状态栏
交互界面的形式
• 自然语言界面
自然语言比命令语言更符合使用 者的语言习惯。但自然语言非常复 杂，不仅包含语音、语义，还包含
语义的延伸及其多重性，使得自然
语言界面的实现十分困难。典型的 自然语言界面是语音输入，如右图 所示，但目前还没有一款完全以自 然语言界面为基础的流行游戏。
交互界面的形式
• 姿势识别界面
对象结构面板是用来显示画
布中所有控件的一个列表。
列表中不仅列举了所有的控
件，还通过缩进描述了控件之间
的关系，在对控件做管理的时候
将会更加方便。
Cocos Studio用户界面编辑器的介绍 • UI动画面板
UI动画主要是针对界面上的控件做一些复合的属性 变化，通过简单的属性设置就能够实现很多动画效果， 对于程序来说往往这部分占用了大量的时间。
进行全身运动。右图给出了一个基
于Wii手柄的游戏交互场景实例。
交互界面的形式
• 基于Kinect 的3D体感交互界 面
Kinect是微软基于以色列 PrimeSense的技术开发而成，作 为 Xbox 360游戏机的外设，它让 玩家不需要手持游戏手柄，而是使
用语音指令或身体动作进行游戏。
右图为Kinect的构造示意图。
姿势识别界面大体上分为两种。一种使用摄像机捕获人的手势、眼 神、鼻、笑容或其他肢体动作，进而控制计算机。第二种是使用计算机 的数据笔（stylus）和三维鼠标，根据一段时间内的移动轨迹和速度决
定操作命令，典型的例子是数据笔在手写输入屏上书写汉字。
交互界面的形式
• 基于运动传感的直观自然交 互界面
直到基于运动传感的Wii游戏机 的出现, 带来了的颠覆性的游戏操 作方式和体验——能让玩家在游戏 中不自觉地根据游戏做出各种动作，
相机、视觉跟踪与 识别
视频
眼部跟踪系统 触觉仪器 脑电图描记器
触觉/挤压力
神经
交互界面的形式 • 交互界面的形式：
命令语言界面、菜单界面、自然语言界面、姿势识别界 面、基于运动传感的直观自然交互界面、基于Kinect 的3D 体感交互界面。
交互界面的形式
• 命令语言界面（Command）
命令语言界面是最早使用，也是 最流行的一种人机界面形式。界面 由用户命令驱动，计算机读取用户 命令来执行用户的意图。20世纪90 年代中期流行的MUD（Multi User
交互界面的设计基础
图形用户界面（Graphics User Interface，GUI）是以视
觉感知通道为主的人机界面。在PC平台上最重要和最普及的
图形用户界面是WIMP（Window Icon Menu Pointing，窗
口、图标、菜单、鼠标）界面。在WIMP界面之后，经历了各
种以其他感知通道为主的界面方式，如头盔、立体眼镜、语音、
Dimension，俗称泥巴）游戏就是
一种纯文字界面，如右图所示。
交互界面的形式
• 菜单界面
菜单界面是图形用户界面的典型
代表, 可以把类似的功能集中到一个
菜单项中，无形中方便了用户的记忆
和查找。菜单界面使用户可以在很短 的时间内熟悉一款游戏或软件的使用 方法，特别是依赖于菜单进行信息交 流的回合制游戏。
游戏的可玩性与交互界面
• 游戏可玩性的基础是交互界面的可用性。 • 游戏界面的可操作性，包括手眼协调、条件反射和难度递增 等，是游戏可玩性的一个基本要素。 • 交互界面的沉浸感是大多数游戏可玩性的共性要素之一。 • 交互界面的操作效率也是游戏可玩性的要素之一。
交互界面的设计基础 • 色彩设计：
色彩的运用对交互界面的设计至关重要。优秀的色彩搭
1.创建项目 打开CocosStudio,选择UI Editor，在界面中选择文件->新建即可创 建一个新项目，在界面的左上角显示的是画布大小，可以调整，这里我们 设置为960x640。创建好后出现如下界面。
Cocos Studio用户界面编辑器的使用
2.导入资源 在新创建项目的资源
面板点击鼠标右键即可导
本章目录
• Cocos Studio用户界面编辑器的介绍
•
•
Cocos Studio用户界面编辑器的使用
Cocos2d-x中用户交互
•
•
游戏界面设计实例—贪食豆
小结
概论
用户界面(User Interface)是人和机器的互动过程 (Human-Machine Interaction)中的一个重要层面，它是人与 机器之间传递和交换信息的媒介。 游戏中交互界面设计(Game Interface Design简称GID)， 是指对电子游戏中与游戏用户具有交互功能的视觉等实体元素 进行布局、规划、导览和切换等，是玩家最直接面对的互动活 动，也是玩家对游戏的第一印象。
Cocos Studio用户界面编辑器的介绍 • 其他面板
• 输出面板———输出日志信息，帮助我们查找编 辑时遇到的问题 • 控件面板———所有控件的列表 • 预览面板———预览图片 • 菜单栏————常用操作菜单 • 快捷菜单———一些便捷工具 • 状态栏————显示状态信息
Cocos Studio用户界面编辑器的使用
有条地显示给玩家，否则玩家无法做出正确的判断。
交互界面的设计基础
（2）信息输入 即如何提供用户发布正确的输入指令的渠道。游戏玩家的输入 手段主要包括以下三类： 1) 菜单：可分为固定式菜单、下拉式菜单、弹出式菜单三种。 2) 图标：形象地传递信息量。有的图标只是起到提示作用，有
的图标是文字按钮的图形化，每个图标对应一项功能。
分，在CocosStudio中就包含了多达14种控件类型，包括按钮、
复选框、精灵、图片、数字标签、自定义字体、进度条、滑动
条、文本框、输入框、层容器、滚动层容器、列表层容器、分
页层容器，涵盖了UI界面制作常见控件类型。
Cocos2d-x中的界面设计
Cocos2d-x工具集Cocos Studio——UI Editor
Cocos2d-x中的用户交互
• 按键事件(EventListenerKeyboard)
EventListenerKeyboard对象表示按键事件监听器。键盘
事件的响应函数有2个：
*void onKeyPressed(EventKeyboard::KeyCode
keyCode,Event event);//键按下
配是交互界面设计成功的前提和基础。色彩的三要素为：
（1） 明度（brightness/lightness），也叫亮度，体现颜色的明暗度；
（2）色相（hue），也叫色泽，是色彩的相貌，是区别色彩种类的名称，
如红、橙、黄、绿、青等；
（3）纯度（saturation），色彩的纯净程度，又称为彩度或饱和度。
Cocos Studio用户界面编辑器的介绍 • 渲染界面
渲染面板是编辑器的核 心面板，所有的效果都需要 在渲染区来查看。
作为所见即所得编辑器，渲染面板会实时更新所有 的控件以及控件的属性。在渲染面板中所呈现的内容将 和游戏中的最终呈现效果是一致的。
Cocos Studio用户界面编辑器的介绍 • 对象结构面板
Cocos Studio用户界面编辑器的使用
最后将资源区的图片btn_animation.png， btn_animation_select.png分别拖放到按钮属性中的“正常状态”和“按 下状态”框中，此时按钮制作完成，如图所示。
Cocos Studio用户界面编辑器的使用
4.导出项目 选择文件->导出项目 按默认参数即可导出项目，按提示存储位置可 以找到发布文件夹publish，文件结构如图所示，需要使用时将所有文件 放在同一路径即可。
Cocos Studio用户界面编辑器的介绍
• 资源面板
资源面板是对资源的一种管理 窗口，对于一个项目来说资源是非 常重要的。 • 以Resources文件夹为根 • 合理的文件夹划分 • 命名使用英文字母
Cocos Studio用户界面编辑器的介绍
wenku.baidu.com
•画布列表面板
画布是来管理同 一个项目中的多个界 面的。每一个界面之 间是相互独立，互不 影响的。

3) 快捷键：即键盘字母组合方式构成的指令发布方式。快捷键
的使用能极大地提高速度，有些快捷键甚至能提供作弊模式。
人机交互模块
人类行为模块 打字 手写 点击 带上数据手套手势 设备 键盘、鼠标、数据 手套、写字板等 麦克风、语音识别 与合成 计算机感知模块
位置/运动
说话
声音
身体移动 头的移动 自由手势 面部表情 眼睛移动 手部挤压 大脑运动
入资源，本例中导入的按 钮正常状态和点击状态所 需要的图片资源 btn_animation.png和 btn_animation_select.pn g，导入后资源面板状态如 图所示。
Cocos Studio用户界面编辑器的使用
3.构建UI界面 在控件区拖放一个按钮控件放到渲染窗口的合适位置，选中按钮后可 以在属性窗口中看到按钮的各种属性，把属性中的“名字”更改为 “btn_animation”，“Tag”设置为5，“文本”更改为“animation”， “文本”的颜色设置为“Orange”，大小设置为21，如图所示。
注意：这个面板只有在动画模式下才会显示。
Cocos Studio用户界面编辑器的介绍 • 属性面板 通用属性：
通用属性指每一个控件都包括的属性，包 括常规的位置、大小、翻转等。这部分属性需 要熟练掌握并灵活应用。
特性:
每一个控件的产生都有其特殊的用途，那 么每一个控件都包含一些其他控件所不包含的 特殊属性。
第六章 游戏中的交互界面设计
浙江大学软件学院 梁秀波 Email：liangxb@cst.zju.edu.cn
本章目录
• • • • • • • • 交互界面概论 游戏的可玩性与交互界面 交互界面的设计基础 人机交互模块 交互界面的形式 游戏软件的交互界面设计 粒子系统实例 Cocos2d-x中的界面设计