所有教程链接：
http://www.cocoachina.com/bbs/read.php?tid-1677434.html
http://www.cocoachina.com/bbs/read.php?tid-1677444.html
http://www.cocoachina.com/bbs/read.php?tid-1677448.html
http://www.cocoachina.com/bbs/read.php?tid-1677449.html
定义自己的控件（步骤1+步骤2）
假如要自定义一个带文本的图片，文本表示敌人的血量，效果如下图。
接下来的教程你可以自己完成下面的代码，也可以复制我已经写好的代码，写好的代码在工程SampleCode路径下，代码很容易理解，下面只讲解关键部分代码。
（1） 创建自定义控件C++类
CWRatioImage类接口如下这个控件比图片控件多了一个比例的设置，表示血量的百分比。这个类很关键，之后很多地方用，一定要编译通过，测试好功能。
（SampleCode\CWRatioImage.h代码片段） （2） 在studio中定义控件
首先看一下studio 的数据存取，箭头表示数据的流向，下面的每一条线都走通才能完成我们的自定义控件。studio中读写数据是xml格式的，studio中提供了读写，只要继承对应的类可以方便操作；导出工程的二进制文件和游戏加载二进制文件，用flatbuffer实现，比较麻烦一点。
先看studio 的数据存取，只要按DataModel中给的模式完成自己的类就可以实现控件数据的存取，按ViewModel中给的模式完成自己的类就可以显示控件，定义这些类的时候可以直接复制已有的类，查找替换所有的类名，修改部分代码就可以，这里的代码都是C#，但是作为会C++的你，写这点C#这点代码so easy。先定义好ViewModel子类，我们的自定义控件是图片控件的子类，所以要继承ImageViewObject，在类里面增加一个Ratio属性就可以了。然后定义DataModel子类，要继承自ImageViewObjectData，增加属性。
（SampleCode\CWRatioImageObject不使用lua.cs代码片段）
（SampleCode\CWRatioImageObjectData.cs代码片段）
把写好的类分别放到Addins.Sample\ViewModel和Addins.Sample\DataModel文件夹下，添加到工程中（如下图），再编译一下addins工程，编译通过后把Release.Win32\Addins.Sample.dll、Release.Win32\CustomWidget.dll复制到cocos文档路径的Addins\ModelExtend下（替换前需要关闭studio），再打开studio，我们刚才自定义的控件就出现杂控件栏了，拖拽一个控件到画布，可以看到自定义属性（如下图），修改自定义属性，然后保存画布，关闭画布再打开，可以发现我们修改的属性已经可以保存读取了。
第一步终于完成了，但是，我们只是完成了存取数据，并没有看到图片上面有文字显示，要想显示文字，还需要很多工作。Studio是通过C#调用cocos2d-x的C++类来渲染画布的，比如ImageViewObject创建时会创建一个cocos2d::ui::ImageView，设置ImageViewObject的属性时，在内部调用cocos2d::ui::ImageView的接口设置属性。可惜的是这个过程是通过SWIG技术封装调用的，我们没法修改。但是studio可以直接调用lua代码，我们可以用lua调用我们的C++类，这样就可以实现绘制了。Lua调用C++，可以用cocos2d的脚本实现。把我们刚才写好的CWRatioImage类放到addins工程下的CustomWidget\Widget目录，然添加类到工程中（如下图）。打开cocos2dx_cw.ini文件，添加头文件和类名（如下图），然后双击genbindings.bat，运行成功后就可以看到lua_cocos2dx_cw_auto.cpp和lua_cocos2dx_cw_auto.hpp已经添加了我们的导出类（如下图）。
到这我们的CWRatioImage就可以用lua文件调用了。参考CWTextRich.lua，新建一个CWRatioImage.lua文件，修改文件创建正确的类对象，修改属性调用接口。把这个lua文件放到cocos文档路径的Addins\ModelExtend下。
（SampleCode\CWRatioImage.lua代码片段）接下来让studio调用这个lua文件，修改CWRatioImageObject.cs，让这个类调用lua文件实现绘制，并且在自定义属性改变时调用lua接口修改我们的自定义属性。
（SampleCode\CWRatioImageObject使用lua.cs代码片段）现在编译addins工程，还是把生成的两个dll拷贝到cocos文档目录中。重新启动studio，再设置自定义属性的值，是不是已经可以显示了，O(∩_∩)O~。默认创建出的控件是没有图片的，这个自定义控件继承自imageview，可以修改图片。
attempt to index global ‘cccx’ (a nil value)