cocos2d-Lua FairyGUI移植(一)

简介

---

官网：FairyGUI

FairyGUI有普通版和专业版的区分，专业版与普通版相比较，仅仅增加了两个方面的限制：

• 关于对Spine等骨骼动画的使用
• 关于对辅助工具查找重复资源和未使用资源的使用

在这里真的要感谢下官方没有对FairyGUI添加诸多的收费限制，一般开发使用免费版的即能满足需求。

优势

---

• 专业版提供了丰富的辅助工具， 可以一键查找未使用资源，重复资源相关
• 提供了丰富的组件使用，比如MovieClip, 动效， 控制器，关联系统等
• 简化了对图片组件的使用，如果更换图片直接使用GLoader
• 简化了对骨骼动画的使用，直接通过组件GLoader3D就可以支持
• 可将多个不同类型的组件嵌套在一起，比如按钮，动画等，不需要编写一行代码
• 编译器内置了多国语言，直接切换就可以查看效果
• 编译器添加了对组件的关联， 可以很友好的支持各种适配
  
  

CocosLua接入流程

---

官网暂时没有提供对Lua的示例相关，且在项目中使用FairyGUI需要手动添加tolua++的接口支持。
而在Quick-Cocos2dx-Lua中，丰富了关于tolua++接口相关，推荐使用。

参考: Quick-Cocos2dx-Lua
环境: cocos2d-x Lua 3.17; Mac 10.14.6 Xcode

• 打开Xcode项目，修改CCLabel.h文件：

// CCLabel.h 
// 添加virutal标记，主要原因是FairyGUI对Label相关进行了实现
virtual void updateBMFontScale() override;

• 打开Quick-Cocos2dx-Lua项目:

1. 将 …/cocos/scripting/lua-bindings/manual/fairygui 拷贝到项目的 …/frameworks/cocos2d-x/cocos/scripting/lua-bindings/manual中， 该目录文件主要是实现tolua++相关的接口
2. 将…/cocos/editor-support/fairygui 目录拷贝到项目的 …/frameworks/cocos2dx/cocos/editor-support中，该目录文件主要是FairyGUI的实现接口相关

• 打开Xcode项目:

1. 将lua-binding中的fairygui相关，添加到cocos2d_lua_bindings.xcodeproj的manual目录中
2. 将editor-support中的fairygui相关，添加到cocos2d_libs.xcodeproj的editor-support目录中
3. 添加时，注意：Add folders要选择:Create Groups， 且Build Settings下的User Header Search Paths下添加fairygui的配置路径

• 打开lua_module_register.cpp 文件，添加如下代码：

// lua_module_register.cpp
#include "scripting/lua-bindings/manual/fairygui/lua_fairygui.hpp"

int lua_module_register(lua_State* L)
{
 // ...
 register_fairygui_manual(L); 
}

• 编译报错：

1. indclude文件引用错误，可修改下路径相关
2. 某些接口没有实现，直接移植下即可
3. 某些枚举没有，直接移植下即可

• 测试代码：

--[[
* 将FairyGUI-Cocos2dx/Examples/.../UI下的Bag_atlas0.png, Bag.fui资源文件拷贝到项目res中
* 通过tolua.isnull获取的接口为false，且tolua.type的对应接口为GRoot和GComponent表示成功
]]

-- 添加包
fairygui.UIPackage:addPackage("fgui/Bag")

-- 获取根节点
local root = fairygui.GRoot:create(display.getRunningScene())
print(tolua.isnull(root), tolua.type(root))
root:retain()

-- 获取view 
local view = fairygui.UIPackage:createObject("Bag", "Main")
print(tolua.isnull(view), tolua.type(view))
if view then 
 root:addChild(view)
end

FairyGUI 与CocosStudio的不同

---

我是从cocosStudio转向FairyGUI的， 在了解FairyGUI之前，简要的说明下两者组件的差别吧，这样有助于加深对FairyGUI的理解。

• clone

FairyGUI 没有clone的支持

• 图片

cocosStudio中的图片主要有两种：

1. Sprite: 精灵， 在代码中支持动态更换， 不支持触摸点击， 不支持clone
2. ImageView: 图片， 在代码中支持更换，支持触摸点击，支持clone

FairyGUI的图片，主要是GImage，它是不支持触摸点击，且不支持更换图片。
如果需要动态更换图片或者点击事件，就必须使用装载器GLoader

• 按钮

cocosStudio中提供了Button, CheckBox相关， 尤其对于多选按钮组，或者单选按钮组，需要在程序中手动实现。

FairyGUI仅提供了GButton， 直接可以通过控制器在UI编译器中实现多选，单选等

• 容器与列表

cocosStudio中的列表容器有如下几种：

1. PageView/ListView：翻页容器/列表容器， 使用的时候，程序会默认将所有的Item创建出来
2. ScrollView/TableView: 滚动容器，尤其后者一般使用较多，效率很高

FairyGUI提供的就很简单了， 通过使用列表，会默认设置滚动容器的属性相关，且列表支持多种不同类型的item，更厉害的是，勾选列表的UI选项，直接就可以将列表转换为树列表使用

• 帧动画

cocosStudio中使用帧动画，一般是通过TexturePacker将多个图片打成图集，然后在代码中调用图集，设定间隔，进行循环播放，或者干脆制作为动画进行调用

FairyGUI提供了GMovieClip，通过编译器可以直接生成帧动画，并将其放置到指定的元件中，即可使用

FairyGUI的特性

---

• GLoader 装载器的使用， 该元件不仅支持图片的替换，也支持添加动画，组件等
• GLoader3D 3D装载器，主要是在专业版上，用于骨骼动画的加载
• 控制器，这个在按钮组和页面切换中使用较多，是一个非常重要且有意思的特性
• 关联系统， 属于UI自动布局的核心技术
• 动效，在组件中可以嵌入多种动画效果
• 插件， FairyGUI支持使用Lua的方式编写不同的插件，满足不同项目的需求

下一篇：cocos2d-Lua FairyGUI注意项(二)