Cocos2d-x UI学习笔记

Cocos2d-x提供了一套易于使用的UI API来满足你的GUI需求，其中包括：Label、Menu、MenuItems、Buttons和Views。


Label（标签）


Cocos2d-x中提供了Label(标签)对象来创建TTF、BMFont和SystemFont文本。


Label BMFont（BMFont标签）


BMFont是使用位图字体的标签类型。位图字体是由点或像素矩阵所组成，这些点和像素代表了字符图形的外形和大小。位图字体的使用很方便也很容易，但它不可伸缩，其每个尺寸都需要一个单独的字体。


Label类是SpriteBatchNode的子类，所以Label的每个字符都可以看作一个Sprite（精灵），都具有旋转、缩放、着色，改变锚点以及其他继承自Node对象的属性。


创建一个BMFont文本需要两个文件：一个.fnt文件和一个显示每一个对象的.png格式的图片。利用像Glyph Designer这样的工具可以自动创建该类型的文件。






Label TTF（TTF标签）


TTF是一个 True Type Font 的标签类型。创建TTF标签你需要指定一个.ttf格式的字体文件名、文本字符串以及字体大小。与BMFont不同，TTF可以改变字体的显示大小，无需单独的字体。






Label SystemFont（系统字体标签）


SystemFont是一个使用系统默认的字体和尺寸的标签类型。意思就是说我们不能修改字体的属性，你可以理解为是一种系统字体，系统规则。创建一个SystemFont标签






菜单和菜单项


Menu 是游戏选项的导航。菜单通常包含如播放、退出、设置和关于等选项。通常以可点击的按钮形式显示。


菜单由什么组成


Menu是一个特殊的Node对象


菜单选项和添加到菜单


MenuItems是Menu的核心。菜单选项通常有一个正常状态、一个被选择的状态以及一个回调。回调通常发生在MenuItems被选择的时候。


Lambda作为菜单回调


lambda 函数是指可以在源代码中编写内联函数的函数。Cocos2d-x中可以使用 lambda 函数，你甚至可以将 lambda 函数作为回调函数。除了Menu回调， lambda 函数可用作多种函数。


GUI控件和容器


综述


新的GUI模块是基于GUI控件的框架，最开始设计是用于Cocos Studio中。新的GUI模块的父类是继承自ProtectedNode的ui::Widget。当从ProtectedNode中添加或者移除子节点时，ProtectedNode用于控制内部Node列表。内部节点列表不会被触发，对于保持模块内部渲染组件很安全。我们可以将GUI分成两部分：Widget （控件）和 Containers （容器）。


Layout（布局）


Layout类是所有容器的父类，它继承自Widget。Layout类主要用于陈列子控件和剪裁。


LayoutManager、LayoutParameter和Margin类用于陈列元素。HBox、VBox和RelativeBox可以很方便地将子控件水平地、垂直地、相对地陈列子控件。


ScrolView、ListView和PageView是针对某些场景使用的指定容器。我们将在另一章节中详细讲解。


Widgets（组件）


Widgets（组件）是GUI对象，使用组件可以很容易地创建用户界面。下面我们来一起讨论下你可能会用到的一些常用组件：


Buttons（按钮）


按钮用来拦截触摸事件，点击按钮会调用一个预定义的回调函数。它继承自ui::Widget，这个类提供了设置按钮标题、图像以及其他属相的方法。每个按钮都有一个正常状态和一个被选择的状态。Button的外观根据状态而改变


CheckBox（复选框）


CheckBox允许用户可以做多重选择。CheckBox可以有正常、被选择、不可选三种状态。


LoadingBar（进度条）


LoadingBar可用于显示操作的进程，例如下载、文件传输等，也可以称其为状态条。


Slider（滑动条）


滑动条允许用户通过移动一个指标来设定值。


ImageView（图像显示控件 ）


ImageView是一个展示图片的占位符。支持触摸事件、对焦、百分比定位和内容大小百分比。


Text（文本）


Text控件用于展示文本。还可以将其用作一个写了字的按钮。Text支持系统默认字体和TTF字体。


TextBMFont


TextBMFont控件用于显示BMFont文本。支持触摸事件、对焦、百分比定位和内容大小百分比


TextAtlas


TextAtlas控件用于将文本显示为Atlas字体。支持触摸事件、对焦、百分比定位和内容大小百分比。


RichText（富文本）


RichText控件用于显示文本、图像和常用节点。支持触摸事件、对焦、百分比定位和内容大小百分比。当接收到一个触摸事件时，整个RichText控件都接收这个事件


TextField


TextField控件用于输入文本。支持触摸事件、对焦、百分比定位和内容大小百分比。