chapter6 游戏界面设计

游戏的可玩性与交互界面
• 游戏可玩性的基础是交互界面的可用性。 • 游戏界面的可操作性，包括手眼协调、条件反射和难度递增 等，是游戏可玩性的一个基本要素。 • 交互界面的沉浸感是大多数游戏可玩性的共性要素之一。 • 交互界面的操作效率也是游戏可玩性的要素之一。
交互界面的设计基础 • 色彩设计：
色彩的运用对交互界面的设计至关重要。优秀的色彩搭
对象结构面板是用来显示画
布中所有控件的一个列表。
列表中不仅列举了所有的控
件，还通过缩进描述了控件之间
的关系，在对控件做管理的时候
将会更加方便。
Cocos Studio用户界面编辑器的介绍 • UI动画面板
UI动画主要是针对界面上的控件做一些复合的属性 变化，通过简单的属性设置就能够实现很多动画效果， 对于程序来说往往这部分占用了大量的时间。
Cocos2d-x中的用户交互
EventListener的继承关系
Cocos2d-x中的用户交互
• 触摸事件 在Cocos2d-x中，可以为任意一个游戏元素添加接收事件， Cocos2d-x中的Layer提供了很好的技术支持。Layer类封装了 触摸输入的接口，用于接收输入事件。Layer类中还可以使用 setTouchEnabled方法来打开或着关闭接收触摸的输入。 •单点触摸事件(EventListenerTouchOneByOne) •多点触摸事件(EventListenerTouchAllAtOnce)
1.创建项目 打开CocosStudio,选择UI Editor，在界面中选择文件->新建即可创 建一个新项目，在界面的左上角显示的是画布大小，可以调整，这里我们 设置为960x640。创建好后出现如下界面。
Cocos Studio用户界面编辑器的使用
2.导入资源 在新创建项目的资源
面板点击鼠标右键即可导
*void onKeyReleased(EventKeyboard::KeyCode
keyCode,Event event);//键弹起
Cocos2d-x中的用户交互
• 鼠标事件(EventListenerMouse )
EventListenerMouse对象表示鼠标事件监听器，鼠标事
件监听器的响应函数有4个：
Cocos Studio用户界面编辑器的介绍
• 编辑器布局
面板列表： 1. 渲染面板 2. 对象结构面板 3. UI动画列表面板 4. 关键帧面板 5. 属性面板 6. 资源面板 7. 画布列表面板 8. 输出面板 9. 控件面板 10. 预览面板 11. 菜单栏 12. 快捷工具栏 13. 状态栏
配是交互界面设计成功的前提和基础。色彩的三要素为：
（1） 明度（brightness/lightness），也叫亮度，体现颜色的明暗度；
（2）色相（hue），也叫色泽，是色彩的相貌，是区别色彩种类的名称，
如红、橙、黄、绿、青等；
（3）纯度（saturation），色彩的纯净程度，又称为彩度或饱和度。
Cocos Studio用户界面编辑器的介绍 • 渲染界面
渲染面板是编辑器的核 心面板，所有的效果都需要 在渲染区来查看。
作为所见即所得编辑器，渲染面板会实时更新所有 的控件以及控件的属性。在渲染面板中所呈现的内容将 和游戏中的最终呈现效果是一致的。
Cocos Studio用户界面编辑器的介绍 • 对象结构面板
第六章 游戏中的交互界面设计
浙江大学软件学院 梁秀波 Email：liangxb@
本章目录
• • • • • • • • 交互界面概论 游戏的可玩性与交互界面 交互界面的设计基础 人机交互模块 交互界面的形式 游戏软件的交互界面设计 粒子系统实例 Cocos2d-x中的界面设计
Cocos Studio用户界面编辑器的使用
最后将资源区的图片btn_animation.png， btn_animation_select.png分别拖放到按钮属性中的“正常状态”和“按 下状态”框中，此时按钮制作完成，如图所示。
Cocos Studio用户界面编辑器的使用
4.导出项目 选择文件->导出项目 按默认参数即可导出项目，按提示存储位置可 以找到发布文件夹publish，文件结构如图所示，需要使用时将所有文件 放在同一路径即可。

Dimension，俗称泥巴）游戏就是
一种纯文字界面，如右图所示。
交互界面的形式
• 菜单界面
菜单界面是图形用户界面的典型
代表, 可以把类似的功能集中到一个
菜单项中，无形中方便了用户的记忆
和查找。菜单界面使用户可以在很短 的时间内熟悉一款游戏或软件的使用 方法，特别是依赖于菜单进行信息交 流的回合制游戏。
交互界面的设计基础
图形用户界面（Graphics User Interface，GUI）是以视
觉感知通道为主的人机界面。在PC平台上最重要和最普及的
图形用户界面是WIMP（Window Icon Menu Pointing，窗
口、图标、菜单、鼠标）界面。在WIMP界面之后，经历了各
种以其他感知通道为主的界面方式，如头盔、立体眼镜、语音、
姿势识别界面大体上分为两种。一种使用摄像机捕获人的手势、眼 神、鼻、笑容或其他肢体动作，进而控制计算机。第二种是使用计算机 的数据笔（stylus）和三维鼠标，根据一段时间内的移动轨迹和速度决
定操作命令，典型的例子是数据笔在手写输入屏上书写汉字。
交互界面的形式
• 基于运动传感的直观自然交 互界面
直到基于运动传感的Wii游戏机 的出现, 带来了的颠覆性的游戏操 作方式和体验——能让玩家在游戏 中不自觉地根据游戏做出各种动作，
入资源，本例中导入的按 钮正常状态和点击状态所 需要的图片资源 btn_animation.png和 btn_animation_select.pn g，导入后资源面板状态如 图所示。
Cocos Studio用户界面编辑器的使用
3.构建UI界面 在控件区拖放一个按钮控件放到渲染窗口的合适位置，选中按钮后可 以在属性窗口中看到按钮的各种属性，把属性中的“名字”更改为 “btn_animation”，“Tag”设置为5，“文本”更改为“animation”， “文本”的颜色设置为“Orange”，大小设置为21，如图所示。
游戏软件的交互界面设计
游戏的界面设计与游戏的类型、整体风格联系十分紧密， 一般构造用户界面时，需遵循以下基本原则：
1）一致性原则 2）提供出错反馈 3）保持界面简洁 4）提供帮助和向导功能 5）减少用户的记忆量
Cocos2d-x中的界面设计
CocosStudio工具集所设计的功能十分全面，就UI编辑部

3) 快捷键：即键盘字母组合方式构成的指令发布方式。快捷键
的使用能极大地提高速度，有些快捷键甚至能提供作弊模式。
人机交互模块
人类行为模块 打字 手写 点击 带上数据手套手势 设备 键盘、鼠标、数据 手套、写字板等 麦克风、语音识别 与合成 计算机感知模块
位置/运动
说话
声音
身体移动 头的移动 自由手势 面部表情 眼睛移动 手部挤压 大脑运动
*void onMouseDown(Event *event);
*void onMouseUp(Event *event);
*void onMouseMove(Event *event);
*void onMouseScroll(Event *event);
Cocos2d-x中的用户交互
相机、视觉跟踪与 识别
视频
眼部跟踪系统 触觉仪器 脑电图描记器
触觉/挤压力
神经
交互界面的形式 • 交互界面的形式：
命令语言界面、菜单界面、自然语言界面、姿势识别界 面、基于运动传感的直观自然交互界面、基于Kinect 的3D 体感交互界面。
交互界面的形式
• 命令语言界面（Command）
命令语言界面是最早使用，也是 最流行的一种人机界面形式。界面 由用户命令驱动，计算机读取用户 命令来执行用户的意图。20世纪90 年代中期流行的MUD（Multi User
Cocos Studio用户界面编辑器的介绍 • 其他面板
• 输出面板———输出日志信息，帮助我们查找编 辑时遇到的问题 • 控件面板———所有控件的列表 • 预览面板———预览图片 • 菜单栏————常用操作菜单 • 快捷菜单———一些便捷工具 • 状态栏————显示状态信息
Cocos Studio用户界面编辑器的使用
进行全身运动。右图给出了一个基
于Wii手柄的游戏交互场景实例。
交互界面的形式
• 基于Kinect 的3D体感交互界 面
Kinect是微软基于以色列 PrimeSense的技术开发而成，作 为 Xbox 360游戏机的外设，它让 玩家不需要手持游戏手柄，而是使
用语音指令或身体动作进行游戏。
右图为Kinect的构造示意图。
本章目录
• Cocos Studio用户界面编辑器的介绍
•
•
Cocos Studio用户界面编辑器的使用
Cocos2d-x中用户交互
•
•
游戏界面设计实例—贪食豆
小结
概论
用户界面(User Interface)是人和机器的互动过程 (Human-Machine Interaction)中的一个重要层面，它是人与 机器之间传递和交换信息的媒介。 游戏中交互界面设计(Game Interface Design简称GID)， 是指对电子游戏中与游戏用户具有交互功能的视觉等实体元素 进行布局、规划、导览和切换等，是玩家最直接面对的互动活 动，也是玩家对游戏的第一印象。
Cocos Studio用户界面编辑器的介绍
• 资源面板
资源面板是对资源的一种管理 窗口，对于一个项目来说资源是非 常重要的。 • 以Resources文件夹为根 • 合理的文件夹划分 • 命名使用英文字母