大前天也就是周二被人问道：“对Cocos Studio2.0以后版本用法的了解。”当时我一时之间没法回答，因为Cocos Studio1.6我以前用过很长时间，2.0改版以后我知道改动已经面目全非了，但还没有安装使用过，所以昨天就想上网找找相关的教程和文章看看就没有好的学习资料，没想到跟使用者的海量人数相比，相关资料居然少的可怜，去官网都没有直接找到帮助文档，安装的Cocos Studio2.3帮助F1键点完，居然显示无法找到网页文件，真是令人吃惊，这么敷衍了事的推广，真不知道数控想干嘛？在官网找了半天，终于在cocos的帮助文档下面的编辑器章节找到了Cocos Studio2.0的使用方法，于是乎，就想看看整理一下吧，先看看官方的界面介绍吧

Cocos Studio的界面主要分为菜单栏、工具栏、对象面板、资源面板、画布面板、属性面板、动画面板、输出窗口、状态栏九部分组成，如下图：这个界面构成跟以往的很多游戏编辑器很类似，甚至界面布局跟u3d也很像，具体功能呢，

菜单栏

菜单栏为cocos功能提供了功能入口，它由文件、编辑、视图、项目、窗口、语言、帮助7个命令菜单组成，如图

首先看文件

新建项目：新建cocos项目，快捷键为Ctrl+Shift+N（Win）、Command+Shift+N（Mac）。

新建文件：新建场景、图层、节点、合图、3d场景文件，快捷键为Ctrl+N（Win）、Command+N（Mac）。

打开项目：打开cocos项目功能，快捷键为Ctrl+O（Win）、Command+O（Mac）。

最近打开的项目：最近用cocos编辑的项目路径，最多可显示10个项目，最后打开的项目其项目路径显示在最上面。

关闭XXXX.csd/csi：关闭当前打开的XXXX.csd/csi项目文件。

关闭项目：关闭当前打开的cocos项目。

保存XXXX.csd/csi：保存当前正在编辑的XXXX.csd/csi，快捷键为Ctrl+S（Win）、Command+S（Mac）。

全部保存：保存整个项目中所有的项目文件，快捷键为Ctrl+Shift+S（Win）、Command+Shift+S（Mac）。

另存为：将cocos项目另存到自定义路径下。

导入->导入资源...：将资源从磁盘导入资源面板。

导入->导入1.6版本项目...：将Cocos Studio 1.6的项目文件转换为当前版本的项目文件。

退出：退出Cocos Studio编辑器，快捷键为Alt+F4（Win）、Command+Q（Mac）。

撤销：在编辑器中做一些操作之后，返回到上一步的状态，快捷键为Ctrl+Z（Win）、Command+Z（Mac）。

重做：撤销到上一步后再回撤到修改后的状态，快捷键为Ctrl+Y（Win）、Command+Y（Mac）。

偏好设置：快捷键为Ctrl+,（Win）、Command+,（Mac）。

1、控件：是否允许使用过时控件（艺术数字）。2、鼠标：是否禁用鼠标滚轮缩放。 3、Code IDE：设置Code IDE的路径。

1、启动：模拟器启动是否打开命令行窗口，默认隐藏。

Android相关路径：

设置SDK、NDK、ANT、JDK路径，以供后续在项目中打包与运行所用

可以对分辨率设置的下拉列表显示状态进行修改，添加、编辑、上移、下移、移除、重置，修改后点击确定，工具栏中的下拉菜单同步刷新。

Windows：可以选择在Windows平台上运行，在Android设备上运行，以及浏览器运行（仅JS语言项目支持）。

Mac：在iOS设备上运行，Mac平台上运行，Android设备上运行，以及浏览器运行（仅JS语言项目支持）。

发布与打包：

发布 - > 选择发布类型：

1）发布资源：把编辑器编辑的资源与项目文件发布为Cocos 2d-x引擎所使用的资源，发布后的资源加载速度快，体积小。

2）发布为Code IDE工程：发布资源后并使用Code IDE打开当前项目，方便进一步编码。

3）发布为Visual Studio工程：发布资源后并使用Visual Studio打开当前项目，方便进一步编码。

打包 - > 选择打包类型：

1）Android 安装包（.apk）：将当前项目打包为.apk文件，Windows与Mac运行的cocos都支持，c++、js、lua都支持。

2）iOS安装包（.ipa）：将当前项目打包为.ipa文件，仅Mac运行的cocos支持，c++、js、lua项目都支持。

3）HTML5：将当前项目打包为HTML5包，Windows与Mac运行的cocos都支持，仅js项目支持。

使用上次设置发布与打包：若上次做的发布操作，则继续使用上次设置发布，若上次做的打包操作，则继续使用上次设置打包

1）发布资源与项目文件：把编辑所用的资源拷贝到发布路径以及把csd、csi文件发布为Cocos 2d-x所使用的资源。注意：当资源较多的时候，拷贝速度比较慢，建议使用仅发布项目文件。

2）仅发布项目文件：仅把csd、csi文件发布为Cocos 2d-x所使用的资源。

发布路径：可以自定义资源的发布路径，支持绝对与相对路径。数据格式：csd文件转换为的供引擎加载的数据格式。

csb：使用Flatbuffers上输出二进制，解析效率高，体积小，安全性好，适用于c++与lua项目。

Json：轻量级的数据交换格式，可读性强，JavaScript原生支持，适用于js项目。

自定义：用户扩展的数据格式放在这里

锚点：控制锚点在渲染区的显示与隐藏，快捷键为Ctrl+Shift+A（Win）、Command+Shift+A（Mac）。

标尺：控制标尺的显示与隐藏，快捷键为：Ctrl+Shift+R（Win）、Command+Shift+R（Mac）。

参考线：控制参考线的显示与隐藏，快捷键为：Ctrl+;（Win）、Command+;（Mac）。

锁定参考线：当点击锁定参考线时，将无法选中或移动参考线；取消锁定参考线时，可以在渲染区选中并移动参考线。快捷键为：Ctrl+Alt+;（Win）、Command+Alt+;（Mac）。

清除参考线：当在渲染区添加参考线后，点击清除参考线，所有参考线将被删除。

新建参考线：添加参考线到渲染区。

对象、资源、动画、输出、属性：控制对象、资源、动画、输出、属性面板的显示与隐藏。

启动Launcher：在编辑器中启动Launcher，若已启动则将Launcher界面置顶。

恢复默认布局：若对编辑器中的窗口布局进行修改后，点击恢复默认布局，可还原成初始状态

编辑器目前支持中文版、英文版，若切换语言需要重启编辑器后才能生效；

查看帮助：Cocos官网教程链接，检查更新：检查用户当前版本是否为最新版本，关于Cocos Studio

工具栏包含八个部分：新建文件按钮、分辨率调整工具、预览按钮、发布/打包按钮、平台运行切换工具、对齐排列工具、移动画布控制按钮、鼠标左键状态组。

点击新建

新建文件——用于新建场景、图层、节点、合图、3D场景。

分辨率设置、屏幕方向切换按钮——用于设置当前项目的设计分辨率

预览按钮——用于在模拟器中预览当前项目文件，目前只有2D/3D场景，动画项目文件支持模拟器预览。

发布与打包按钮——用于发布项目资源或项目工程，打包iOS（.ipa）安装包、Android（.apk）、HTML5 包

平台运行切换工具——在不同的平台下运行项目

对齐、排列——针对画布多选控件时的操作，提供了常用的对齐、排列方式。从左到右依次为中心对齐、左对齐、垂直居中、右对齐、上对齐、水平居中、下对齐、水平分布、垂直分布。

移动画布控制按钮——选中手状按钮，可在渲染区拖动画布，鼠标状态也变成手型，快捷键为Q。

仅出现在编辑场景，图层，节点，合图这四类文件。选中箭头状按钮，鼠标样式切换到默认状态，快捷键为W。

仅出现在编辑3D场景文件。

默认选择“平移“状态，可以通过点击对应x轴，y轴，z轴进行切换，决定在沿着哪个坐标轴进行平移。

“旋转”状态下拖拽鼠标，可以通过点击对应x轴，y轴，z轴进行切换，决定将选中物体围绕着哪个坐标轴进行旋转。

“缩放”状态下拖拽鼠标，可以通过点击对应x轴，y轴，z轴进行切换，决定将选中物体沿着哪个坐标轴进行缩放。

1.编辑场景、图层、节点、合图的时候时，对象面板默认分为基础对象、控件、容器、自定义控件四部分。显示如下

在菜单栏 -> 编辑 -> 偏好设置 -> 通用中，如下提勾选允许使用过时控件选项，

点击确定可以将过时的控件——艺术数字显示出来，如下图：

添加控件：左键选中控件，然后拖拽控件到画布面板，然后松开鼠标左键，可以实现添加一个控件的操作。

2.编辑3D场景时。3D状态下的控制面板仅显示3D控件。如：3D摄像机、模型、3D粒子等。如下图所示：

无论在2D状态和3D状态下，控件面板中鼠标悬停时在控件图标上会在右上角出现一个“i”按钮，点击按钮会出现有关这个控件的描述信息，并提供一个扩展链接以打开浏览器获取更多关于这个控件的帮助信息。如下图所示。

资源面板是游戏项目中所有文件的展示面板，实现导入资源、新建、重命名、复制、删除文件等功能。

在Cocos Studio中可以通过右键菜单“导入资源”功能将资源导入到资源面板，从而进行控件赋值，与资源的管理，也可以将资源通过资源面板拖动到其他区域，以完成资源工作流程。特别说明：资源面板所展示的文件结构和磁盘上的文件结构是一致的，当您在磁盘上删除一个文件时，已经引用这个资源的控件会显示资源丢失样式。如下图标红文件：Cocos的标准操作流程是：先把游戏将要用到的资源拖拽到资源面板，然后从对象面板拖拽需要用到的控件到画布面板新建控件，然后从资源面板把资源给新建的控件赋值，然后修改控件的属性，进行界面、场景、动画的编辑。

1）当编辑场景、图层时，显示画布如下：

画布面板是Cocos Studio中最常使用的面板，在该面板中可以进行控件的位置、旋转、缩放的调整、对控件锚点的修改、复制、粘贴等操作，在画布面板中可以单选或多选控件，选中后通过右键菜单或属性面板可以对控件进行进一步的设置。按住空格，鼠标拖动空白处可以对画布进行移动或者按下鼠标中间对画布进行移动。

画布面板的黑色区域代表了您所设置的分辨率大小。

2）当编辑节点资源时，显示画布：

3）当编辑合图资源，显示画布：

4）当编辑3D场景资源时，显示3D画布。

动画面板分为六部分，对象结构树、时间轴、缓动界面、动画控制工具、动画编辑工具、动画列表。

Cocos Studio对每个文件提供一个动画时间轴，在该时间轴上可以添加关键帧，编辑器将自动在两帧之间添加动画曲线，以实现动画效果。
动画在两帧之间默认做匀速运动，而当在前一帧添加缓动效果后，动画会从前一帧到后一帧渐进加速或减速运动，它会使您的动画看起来更逼真。动画控制工具

动画控制工具能够控制当前时间轴上的动画：

：移动到第0帧：移动到前一帧：播放动画。：移动到后一帧。：移动到最后一帧。：是否为循环动画。：控制动画播放哪个速度。

动画编辑工具提供了一些编辑动画时常用的操作：

：添加动画帧，点击后会在时间轴上您选中的位置上添加一关键帧。

点击后您所做的变化会被记录在当前帧，成为关键帧，通过在不同的帧上修改控件的属性，被修改的属性会添加到，通过不同属性的变化创造出丰富多彩的动画效果。

：镜像参考又称洋葱皮，能够以当前帧为基础，将当前帧前后的帧通过线框的形式展现出来辅助动画编辑的操作

动画列表可实现新建动画、删除、重命名等功能。

：新建动画，标识动画的起始帧与结束帧，并把起始帧与结束帧保存下来作为一个动画，比如，如下图：

动画名称为：animation0，从第0帧到第16帧。

对象结构树表示当前项目文件中所有控件如按钮、地图、声音、粒子等等的在当前项目文件的结构，它与画布面板中显示的控件一一对应，将对象面板的控件直接拖动到对象结构树中即可添加相应的对象到该位置（同时在画布面板上被渲染），该结构树提供了一个可视化的调整项目文件中的控件挂载结构的方式，通过对象结构树，可以添加控件、删除控件、调整控件渲染顺序、调整控件父子结构的功能。

：点击这个按钮，可以展开控件的动画属性，当前动画影响的控件的哪些属性，比如：

，表示Panel_InfoBox_3当前只改变倾斜，缩放，坐标这三个属性。

：控制控件在画布面板是否隐藏。

：锁定该控件在画布面板的编辑，不会被点选以及框选。

注意：对象结构树上设置某个控件在画布面板是否隐藏，或锁定该控件在画布面板的编辑，但在对象结构树的面板中不论锁定还是隐藏，都只会影响画布面板的显示或编辑的效果，这个效果不会输出到最终的游戏和模拟器，如果您需要对控件的显隐、是否接受交互在游戏最终效果上有所调整请在属性面板修改控件的属性。

父子结构：Cocos采用父子结构这一概念，使任何对象成为另一对象的子对象，将欲移动的子对象拖动到目标的父对象中即可建立父子关系，子对象会继承父对象的移动、旋转路径，需要注意的是子对象并不会继承父对象的不透明度和颜色叠加属性。

属性面板展示了控件的所有属性，方便您进行调整和修改。

顶部是固定的标题区，属性面板有位置与尺寸，常规，九宫格，特性和高级属性等几个页签。标题区域：标题区域展示了当前选中的控件类型，您可以通过定义的名称在程序中获取当前的控件。

位置与尺寸属性包含了关于锚点、位置、尺寸的一些常规设置。除此之外，还设置了自适应布局功能，布局功能UI布局与多分辨率适配

一、Cocos编辑器，自动布局系统主要涉及固定与拉伸属性：

如图，总共可以修改控件的上下左右四个图钉和中间的两个拉伸条六个属性。

效果 1.当打开其中的任意一个图钉时，当前节点与父节点的对应边的距离即被固定。当父节点的大小修改时，当前节点与父节点对应边的距离总是不变。

2.当打开其中的任意两个相对的图钉时，当前节点与父节点对应的两边的距离成固定比例。即当修改父节点的大小时，当前节点到父节点对应两条边的距离之比总是不变的。 3.当开启中间任意一条拉伸条，如横向拉伸条，节点的宽度与父节点的宽度之比固定不变。

其他

1. 不开启上述任意属性时，对象默认相对左下角位置不变。

2. 当前仅控件对象（文本、FNT字体也没有）和容器两种类型有拉伸条属性。

二、Cocos 2d-x(Cocos Framework)中的相关概念及代码设置

设计分辨率和屏幕分辨率：

首先我们需要了解两个概念：在Cocos2d-x中有两种分辨率：设备分辨率、屏幕分辨率。设备分辨率即当前游戏所运行平台的实际分辨率；设计分辨率就是我们设计的游戏的分辨率。

设计分辨率是可设置的，是我们的游戏程序能够“感知到”的分辨率大小，我们的界面超过这个区域的部分都不会显示。

设计分辨率一般在启动时进行设置

AppDelegate::applicationDidFinishLaunching

中进行，代码如下：

director->getOpenGLView()->setDesignResolutionSize(960,640,ResolutionPolicy::FIXED_HEIGHT);

(这句代码上边还有一句createWithRect这个是在桌面系统上，创建游戏模拟器用的。可以修改里边的Rect的后边两个值来修改设备分辨率，但这个值在移动设备上是无效的。)

这句代码什么意思呢？

这里把设计分辨率设置为960，640，并把游戏界面调整方案设置为固定宽度。但这么设置之后，我们后边再获取设计分辨率时得到的大小却不一定是960，640。这又是为什么呢？

看看源码：

转到setDesignResolutionSize的定义看看。里边做了一些判断和赋值，最终调用了updateDesignResolutionSize，继续转到updateDesignResolutionSize里边，这个函数的部分代码如下：

//1.计算游戏界面在缩放至充满屏幕的情况下X、Y轴的缩放率:
_scaleX= (float)_screenSize.width/ _designResolutionSize.width;
_scaleY= (float)_screenSize.height/ _designResolutionSize.height;
//2.根据设配策略，调整缩放率和设计分辨率:
if(_resolutionPolicy== ResolutionPolicy::NO_BORDER)
{//将X、Y轴缩放值设置为其中的最大者
_scaleX = _scaleY = MAX(_scaleX,_scaleY);
}
else if(_resolutionPolicy== ResolutionPolicy::SHOW_ALL)
{//将X、Y轴缩放值设置为其中的最小者
_scaleX = _scaleY = MIN(_scaleX,_scaleY);
}
else if( _resolutionPolicy == ResolutionPolicy::FIXED_HEIGHT) {
_scaleX = _scaleY;//将X、Y轴缩放值固定为Y轴缩放值，调整设计分辨率的宽度，使设计分辨率的宽度在缩放后依然能够充满屏幕。
_designResolutionSize.width= ceilf(_screenSize.width/_scaleX);
}
else if( _resolutionPolicy == ResolutionPolicy::FIXED_WIDTH) {
_scaleY= _scaleX;//将X、Y轴缩放值固定为X轴缩放值，调整设计分辨率的高度，使设计分辨率的高度在缩放后依然能够充满屏幕。
_designResolutionSize.height= ceilf(_screenSize.height/_scaleY);
}
//其他缩放策略：EXACT_FIT不作调整

这段代码主要做了两件事：

1.根据设备分辨率和设计分辨率计算游戏界面的缩放率；

2.调整设计分辨率。

根据以上源码我们应该很容易就能够理解几种缩放策略的意义：

·NO_BORDER就是在保持设计分辨率大小不变的情况下，将游戏界面按比例缩放至充满屏幕。游戏的上下或者左右两边可能会被裁剪。

·SHOW_ALL(Cocos 2d-x默认方案)就是在保持设计分辨率大小不变的情况下，将游戏界面按比例缩放至设计分辨率的其中一边顶住屏幕。游戏上下或者左右两边可能会有黑边。

·FIXED_HEIGHT就是固定设计分辨率的高度，调整设计分辨率的宽度，使设计分辨率的长宽比与设备分辨率的长宽比相同，然后缩放游戏界面至充满屏幕。

·FIXED_WIDTH同上，不同的是保持宽度不变。

·EXACT_FIT是最粗暴的方式，直接将游戏界面缩放到充满整个屏幕，X轴Y轴缩放比率不一定一致。

那么，我们应该选择哪个方案呢？必然的我们应该选择FIXED_HEIGHT或者FIXED_WIDTH。因为只有这两个方案下，界面是会自动根据设备分辨率调整设计分辨率的大小并且充满屏幕。

接下来加载界面。

加载界面在HelloWorld::init中进行：

auto rootNode= CSLoader::createNode("MainScene.csb");
auto size= Director::getInstance()->getVisibleSize();
rootNode->setContentSize(size);
ui::Helper::doLayout(rootNode);
addChild(rootNode);

这里除了用createNode把界面加载出来，并添加到HelloWorld之外，还做了两件事情：

• 设置加载出来的界面的ContentSize，调用对rootNode调用了ui::Helper::doLayout对加载出来的界面进行处理。

• 为什么要这么设计呢，做成自动的多好啊？

第一个理由：跟编辑器不一致；第二个理由是：自动调整界面被设计为是被动的，如果是主动进行的话，可能会造成大量的性能损失——如果每次设置大小都要重新遍历计算所有的子节点的位置，那得浪费多少CPU时间啊。

效果；设备分辨率X/Y相对设计分辨率X/Y较大，设配策略为固定高度

设备分辨率X/Y相对设计分辨率X/Y较大，设配策略为固定宽度
1. 设备分辨率X/Y相对设计分辨率X/Y较小，设配策略为固定高度
2. 1. 设备分辨率X/Y相对设计分辨率X/Y较小，设配策略为固定高度
  PS：枚举类型ResolutionPolicy是框架提供给我们的方便的默认方案。其实我们在设置设计分辨率之前可以获取设备分辨率，然后自己根据设备分辨率调整设计分辨率。

常规属性包含了一些控件的基础设置，如可见性、旋转角度、倾斜角度、翻转等，大部分控件的常规属性是统一的，但也有一些控件有特殊情况，具体控件的使用方法请参考在线帮助，如下图：

高级属性：包括帧事件的设置和回调属性的设置。当您在画布面板选中了一个或多个控件时属性面板会出现相应的属性，可以通过输入数值、添加文件等方式调整。

使用九宫格能够帮助您节约大量资源空间，在官方示例中，很多地方使用了九宫格，如下面这张难度选择界面：

其深黄色背景就是使用一张仅有482字节大小的图片制作而成，制作方式如下：

九宫格用法

(1) 在属性面板勾选开启使用九宫格功能（部分控件不具备该属性）

(2) 编辑器默认将九宫格的数值设置为资源的1/3，您也可以根据资源的尺寸属性，设置九宫格数值（如距左10像素，就是指控件从最左侧开始10像素内的图像不失真，若同时设置上下左右均为10像素，则不失真图像呈“回”字形）。

设置九宫格的方法有三种：

①直接在输入框内输入数值

②在输入框中通过鼠标滚轮滚动改变

③通过拖拽九宫格内部的四条线改变

(3) 修改控件尺寸至您需要的大小即可。

九宫格原理

九宫格是一种能够使本来拉伸后会变形的图片，经过一定的处理后，拉伸后不变形的技术。九宫格放大时四个角的四个切片向四个方向延伸，到达新的位置，然后上下两边的切片水平拉伸，左右两侧的切片垂直拉伸，中间的位图放大铺满剩余区域。在Cocos Studio中可以定义需要确保不失真的上下左右边距，将剩余部分拉伸。需要注意的是，只有当用户选择包含九宫格功能的控件，并启用九宫格时资源图片才能实现九宫格效果。

高级属性：

添加帧事件

帧事件属性是指可以在同一个控件的每一帧设置自定义数据，用于用户自己的后端调用。

如何使用帧事件？

1.勾选自动记录帧。2.选中控件，在时间轴上点击需要添加帧事件的位置。

3.属性区切换到高级属性。

4.为帧事件赋值。5.切换到时间轴的下一位置。 6.再次为帧事件赋值（可与前一帧不同）。

回调特性

现在可以直接在编辑器里边指定某个控件的事件的处理函数。不再需要一个一个去get控件啦。也不再需要因为修改了控件名或者其他属性后，就得去改程序了。以下分别提供C++、Lua如何使用callback方法。

C++：

1，在编辑器点击根节点，如下图：2，在高级属性->回调特性->自定义类添加类名，比如MyClass，如图：

3，选中想要设置回调特性的控件，进入高级属性->回调特性->回调方法，选择接受的回调类型以及输入回调方法名称：如：Touch方法，名称为onTouch：

4，在C++中，创建一个自己的自定义类：这个类必须遵循如下要求：

a.继承WidgetCallBackHandlerProtocol和Node(或其他继承自Node的类)

b.重写如下接口：

onLocateTouchCallback
onLocateClickCallback
onLocateEventCallback

返回对Touch、Click、Event三种事件的处理函数。（可以只重写你使用到的回调类型）。

如： //.h file

#ifndef __TestCpp__MyClass__
#define __TestCpp__MyClass__
#include "cocos2d.h"
#include "Cocos Studio/Cocos Studio.h"
#include "Cocos Studio/WidgetCallBackHandlerProtocol.h"
class MyClass : public cocos2d::Node, public Cocos Studio::WidgetCallBackHandlerProtocol
{
public:
CREATE_FUNC(MyClass)
MyClass();
virtual cocos2d::ui::Widget::ccWidgetTouchCallback
onLocateTouchCallback(const std::string &callBackName);
virtual cocos2d::ui::Widget::ccWidgetClickCallback
onLocateClickCallback(const std::string &callBackName);
virtual cocos2d::ui::Widget::ccWidgetEventCallback
onLocateEventCallback(const std::string &callBackName);
void onTouch(cocos2d::Ref* sender, cocos2d::ui::Widget::TouchEventType type);
void onClick(cocos2d::Ref* sender);
void onEvent(cocos2d::Ref* sender, int eventType);
private:
std::vector<std::string> _touchTypes;
std::string _click;
std::vector<std::string> _eventTypes;
};
//.cpp file
#include "MyClass.h"
#include "ui/UIText.h"
USING_NS_CC;
using namespace std;
using namespace cocos2d::ui;
MyClass::MyClass()
{}
Widget::ccWidgetTouchCallback MyClass::onLocateTouchCallback(const string &callBackName)
{
if (callBackName == "onTouch")//判断事件名，返回对应的函数。下同
{
return CC_CALLBACK_2(MyClass::onTouch, this);
}
return nullptr;
}
Widget::ccWidgetClickCallback MyClass::onLocateClickCallback(const string &callBackName)
{
if (callBackName == "onClick")
{
return CC_CALLBACK_1(MyClass::onClick, this);
}
return nullptr;
}
Widget::ccWidgetEventCallback MyClass::onLocateEventCallback(const string &callBackName)
{
if (callBackName == "onEvent")
{
return CC_CALLBACK_2(MyClass::onEvent, this);
}
return nullptr;
}
void MyClass::onTouch(cocos2d::Ref* object, cocos2d::ui::Widget::TouchEventType type)
{
CCLOG("onTouch");
}
void MyClass::onClick(cocos2d::Ref* sender)
{
CCLOG("onClick");
}
void MyClass::onEvent(cocos2d::Ref* sender, int eventType)
{
CCLOG("onEvent");
}

4，为第3步编写的类创建工厂类：

这个类必须继承Cocos Studio::NodeReader，并重写如下三个接口
getInstance —— 返回工厂类的单例
purge —— 销毁工厂类
createNodeWithFlatBuffers —— 创建第3步编写的类，并调用setPropsWithFlatBuffers

如：//.h file

#ifndef __cocos2d_libs__MyClassReader__
#define __cocos2d_libs__MyClassReader__
#include "cocos2d.h"
#include "Cocos Studio/CocosStudioExport.h"
#include "Cocos Studio/WidgetReader/NodeReader/NodeReader.h"
class MyClassReader : public Cocos Studio::NodeReader
{
public:
MyClassReader() {};
~MyClassReader() {};
static MyClassReader* getInstance();
static void purge();
cocos2d::Node* createNodeWithFlatBuffers(const flatbuffers::Table* nodeOptions);
};
#endif /*defined(__cocos2d_libs__MyClassReader__) */
//.cpp file
#include "MyClassReader.h"
#include "MyClass.h"
USING_NS_CC;
static MyClassReader* _instanceMyClassReader = nullptr;
MyClassReader* MyClassReader::getInstance()
{
if (!_instanceMyClassReader)
{
_instanceMyClassReader = new MyClassReader();
}
return _instanceMyClassReader;
}
void MyClassReader::purge()
{
CC_SAFE_DELETE(_instanceMyClassReader);
}
Node* MyClassReader::createNodeWithFlatBuffers(const flatbuffers::Table *nodeOptions)
{
MyClass* node = MyClass::create();
setPropsWithFlatBuffers(node, nodeOptions);
return node;
}

5，在加载节点之前注册这个接口到CSLoader中

CSLoader* instance = CSLoader::getInstance();
//注意第一个参数必须是第一步填写的自定义类名加“Reader ”如上述的"MyClassReader"
instance->registReaderObject("MyClassReader",(ObjectFactory::Instance)MyClassReader::getInstance);

6，使用CreateNode加载你的节点，因为你的自定义类的create已经委托给工厂类，只要你注册工厂类的时候没写错，工厂类会在createNode里边create你的自定义类并调用onLocateTouchCallback，onLocateClickCallback，onLocateEventCallback实现代码回调与编辑器的绑定。

设置自定义数据

1，先在编辑器Button控件高级属性，用户数据填写数据：比如123，如下图：

C++：cocos2d-x 3.8之前的版本：

//包含头文件
#include "Cocos Studio/CCObjectExtensionData.h"
.....
//根据控件的Tag获取button控件
auto button = _rootNode->getChildByTag("XXX");
//在代码里面先获取到button，然后调用getUserObject()，并把获取的对象强转为Cocos Studio::ObjectExtensionData* 指针，再调用getCustomProperty()
auto userdata = ((Cocos Studio::ObjectExtensionData*)(rootNode->getUserObject()))->getCustomProperty();
CCLOG("%s", userdata.c_str());

cocos2d-x 3.8及其以后的版本:

<span style="font-size:10px;">//包含头文件
#include "Cocos Studio/CCComExtensionData.h"
.....
//根据控件的Tag获取button控件
auto button = _rootNode->getChildByTag("XXX");
//在代码里面先获取到button，getComponent()，并把获取的对象强转为Cocos Studio::ComExtensionData* 指针，再调用getCustomProperty()
ComExtensionData* data = dynamic_cast<ComExtensionData*>(child->getComponent("ComExtensionData"));
auto userdata = data->getCustomProperty();
CCLOG("%s", userdata.c_str());</span>

JS：

//根据控件的Tag获取button控件
var button = mainscene.node.getChildByTag(XXXXX);
//获取userData
var userdata = button.getUserData();
cc.log(userdata);

Cocos Studio学习笔记第一篇--界面相关推荐

《鸟哥的Linux私房菜》个人学习笔记-第一篇
<鸟哥的Linux私房菜>个人学习笔记-基础篇这是一篇一个linux菜鸡自学的笔记 csdn上的各位大手子们好,本人实习生一枚最近想自己深入学习下linux,所以在社区里发博客,希望能记 ...
Cocos Studio学习笔记实战第一篇-我们山寨一个那年那兔那些事（看效果）
学习了Cocos Studio大概一周,正赶上十一长假,于是乎想利用刚刚学习的东西巩固一下这几天的学习成果,9月份一直在玩手游<那年那兔那些事>,所以图方便,就把那年那兔那些事的apk报解 ...
bootloader学习笔记---第一篇以stm32为例
目录一.bootloader的任务二.bootloader开发的基础知识段的概念重定位的概念散列文件的概念异常向量(待补充) 三.最简单的bootloader程序四.使用汇编跳转五.备 ...
【Android Studio学习】第一篇、制作一个拥有登录和注册功能的简易APP
目录第一部分.前言 1.目标效果 2.准备知识第二部分.详细步骤 1.新建Empty工程 2.添加资源文件 3.搭建注册界面 4.搭建登录界面 5.编写注册界面和登录界面的代码 6.设置APP初 ...
编程学习笔记(第一篇)面向对象技术高级课程：绪论-软件开发方法的演化与最新趋势（1）...
软件工程的课程,对于从事大中型的软件开发是至关重要的一门课程. <面向对象技术高级课程>深入.系统.完整地讲解当今主流的面向对象软件开发方法的分析.设计.实现及重构方法,深入讲解UML语言 ...
php百分比乘加,PHP学习笔记第一篇基础知识
基础知识我将php语言学习里面最最基础的部分,需要第一个学的,必须牢牢掌握的,归类到一起. 大纲 1.数据类型 2.变量 3.常量 4.操作符 5.流程控制 6.数组 7.字符串操作 8.正则基础 ...
python 学习笔记第一篇---下载网页内所有图片
第一步:打开网址,进入开发者模式,选中 Network,选择 Img 然后刷新页面,静静等待页面加载等待页面加载完成,你可以看到这边有很多图片的资源随便点开一个图片选择 Headers 可以看到 ...
MySQL学习笔记-第一篇-基础知识与命令
目录 1 登录命令 1.1 主机域名登录 1.2 主机ip登录 2 库命令 2.1 显示库 2.2 创建数据库 2.3 删除数据库 2.4 MySQL-8.新特性 3 表命令 3.1 创建数据表 3. ...
华为HCIA-Datacom 学习笔记-------第一篇
文章目录一.前言二.华为设备图标简介三.通信与网络 1.网络通信基本概念 2.信息传递过程 3.常见术语 4.数据通信网络基本概念 5.网络设备四.网络类型与网络拓扑 1.局域网.城域网.广域 ...

Cocos Studio学习笔记第一篇--界面

菜单栏

添加帧事件

回调特性

设置自定义数据

Cocos Studio学习笔记第一篇--界面相关推荐

最新文章

热门文章