CocoStudio课件——第二章UI编辑器介绍与使用.pptx

触控科技Hello，CocoStudioFast、Ease、F主讲人：Hanreasection1section2section3CONTENTSsection1UI的概念 UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。 好的UI设计不仅是让游戏变得有个性、有品味，还要让游戏的操作变得舒适、简单、自由、充分体现游戏的定位和特点。UI编辑器应用环境 UI作为和游戏玩家接触最直接的部分，它的最终效果直接控制着游戏的品质。如果想做一款优秀的游戏，精美的界面是一项极其重要的要求。 一般UI编辑器的使用者是美术，美术在photoshop中编辑完成后会切成独立的小图。并在UI编辑器还原整个界面效果。编辑器布局面板列表：渲染面板对象结构面板UI动画列表面板关键帧面板属性面板资源面板画布列表面板输出面板控件面板预览面板菜单栏快捷工具栏状态栏渲染面板 渲染面板是编辑器的核心面板，所有的效果都需要在渲染区来查看。 作为所见即所得编辑器，渲染面板会实时更新所有的控件以及控件的属性。在渲染面板中所呈现的内容将和游戏中的最终呈现效果是一致的。对象结构面板对象结构面板是用来显示画布中所有控件的一个列表。列表中不仅列举了所有的控件，还通过缩进描述了控件之间的关系，在对控件做管理的时候将会更加方便。UI动画面板 UI动画主要是针对界面上的控件做一些复合的属性变化，通过简单的属性设置就能够实现很多动画效果，对于程序来说往往这部分占用了大量的时间。 注意：这个面板只有在动画模式下才会显示。属性面板通用属性： 通用属性指每一个控件都包括的属性，包括常规的位置、大小、翻转等。这部分属性需要熟练掌握并灵活应用。特性: 每一个控件的产生都有其特殊的用途，那么每一个控件都包含一些其他控件所不包含的特殊属性。资源面板资源面板是对资源的一种管理窗口，对于一个项目来说资源是非常重要的。以Resources文件夹为根合理的文件夹划分命名使用英文字母画布列表面板画布是来管理同一个项目中的多个界面的。每一个界面之间是相互独立，互不影响的。其他面板输出面板———输出日志信息，帮助我们查找编辑时遇到的问题控件面板———所有控件的列表预览面板———预览图片菜单栏————常用操作菜单快捷菜单———一些便捷工具状态栏————显示状态信息section2控件的作用 控件是用户可与之交互的对象，是UI界面的组成元素、也是UI的具体实现。丰富的界面效果正是通过控件间的组合而设计出来的。 Cocos2d-x引擎包含了大量的常用控件，如按钮，输入框，图片等。这些控件基本能满足用户制作UI界面的需求。 目前CocoStudio的UI编辑器cocostudio对Cocos2d-x提供了完善的支持，所有的底层控件均可在编辑器里完成创建修改，并提供自定义控件的扩展。控件的分类不可交互类型可交互类型展示类型图片、文本、数字标签、自定义字体、进度条按钮、复选框、滑动条、输入框管理类型层容器滚动层、列表容器、翻动页面注：此处的可交互类型的判断标准指的是是在默认状态下控件是否和用户有着双向的交互。任何控件都可以通过修改属性和绑定事件的方式添加对用户事件的响应以达到双向交互的目的。按钮[Button] 按钮是控件中最常用的可交互控件，与生活中的按键类似，它能响应基本的触碰操作，并准确反应人与机器之间的交互状态。 按钮控件允许用户通过单击来执行操作。按钮控件既可以显示文本，又可以显示图像。默认情况当该钮被单击时，它会放大显示，这样看起来像是被按下，当松开时则恢复原有的状态。 通常情况下为达到交互的效果，我们需要给按钮的不同状态设置不同的效果图。正常状态按下状态禁用状态复选框 复选框是为了记录用户选择而用 的，它与生活中的开关是类似的。 除了准确反应人与机器之间的交互状态之外，它还能记录下一个Y/N状态。 在游戏中我们可以通过访问复选框的这个状态值而获取用户的设置，从而丰富游戏的交互性。这种简单的Y/N值将会是非常常用的。 复选框因为需要展示一个Y/N值，所以它需要两个额外的贴图来显示这两个效果。如下图：经常会被用作开关控件图片 图片控件属于控件里面最基本也是最常用的控件，它一般不会与用户形成双向交互的关系。 图片最重要的作用是用来展示图片资源，从而向用户传输一些视觉信息，但并不会读取用户的任何信息或者状态。 数字标签 数字标签是一种特殊的文字系统，一般用来显示数字或字母。由于数字标签属于文字系统，所以它可以使用少量的资源显示大量的文字。 数字标签不同于普通的文本，它需要一个图片来存放文字的渲染资源。正是因为渲染资源的自由选择，所以显示出的文本效果将会非常的出色。 数字标签的图片是按照ascall码的顺序排列出来的。不过一般我们只需要很少的一段字符，所以