Cocos2d-x V3.2+Cocos Studio1.6 实现一个简单的uibutton点击功能
2016-01-05 15:47
696 查看
首先我们打开Cocos Studio1.6,选择UIEditor,进去后我们发现有很多的示例,我们就悬着一个叫demologin的示例
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/b54feac4780cabe5cc2b030bd26e87c2.png)
选择好后我们发现如下图,简单介绍了下功能
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/26dde0e8b1b4b20fa488e14c5974472d.png)
这里我们选中那个login按钮,发现这个按钮的实例名叫login_Button,这个名字我们等会代码里要用,然后我们保存一下
在保存路径下找到这个工程文件夹,打开
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/3a6c842841b76646c832e88569a06721.png)
有这些文件,我们把Json和Resources文件夹下的资源复制到cocos2dx中的资源文件夹中
这个json文件就是记录了这个widget的各种数据,cocos2dx会解析这些数据然后还原这个界面,感兴趣的可以打开研究下
好了到了代码阶段,我就简单的创建了个hellowZ喎�"http://www.2cto.com/kf/ware/vc/"
target="_blank"
class="keylink">vcmxko6y1q8rHztLDx9KqsNHI/bj2zeKyv7XEuaSzzL/itbzI69XiuPa94r72t72wuLKi0v3TwzxpbWcgc3JjPQ=="http://www.2cto.com/uploadfile/Collfiles/20141015/20141015085358140.png"
alt="\">并在头文件中包含
好了,下面就是代码了
?
?
运行
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/db369463c8bd2f1655dd213bfdf9efd3.png)
点击按钮测试下
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/91cfe261095861afb298dbe1447d829c.png)
好的,完成
环境配置
引用
[attachment=79619]
注:针对3.2及以前版本,3.3以后不需要引入CocosStudio库
前
天, 在CocoaChina 2014春季大会上, 激动人心的Cocos2d-x 3.0和CocoStudio 1.3发布了.
Cocos2d-x 3.0做出令人兴奋的性能, 易用性等一系列改进, CocoStudio 1.3带来了稳定性和新特性.
今天让我们看下如何在新建Cocos 3.0rc0的Win32的工程中添加CocoStudio的支持.
一 软件及其下载
1. Cocos2d-x 3.0rc
http://cdn.cocos2d-x.org/cocos2d-x-3.0rc0.zip
2. CocoStudio 1.3
在CocoStudio 1.3中可以直接创建Cocos2d-x项目, 所以这次的安装包有3个.
仅含CocoStudio 1.3
http://126.am/YDrVk1
CocoStudio 1.3包含了Cocos2d-x 3.0rc0
http://126.am/lorYp2
CocoStudio 1.3 包含了Cocos2d-x 2.2.3
http://126.am/eGo4f4
3. Python 2.7.6
Cocos2d-x的脚本用到了Python, Win下没有自带Python, 大家还需要下载Python.
Python的版本我这里推荐大家用最新的2.7.6. 因为Python的2.x和3.x不兼容, 所以一定不能用3.x的版本
大家可以根据自己的系统下载对应的版本.
https://www.python.org/download/releases/2.7.6/
4. Visual Studio
地球人都知道啦. 我今天演示采用的版本是Visual Studio 2013.
VS2010, VS2012, 下面提到的需要设置的地方, 都是相同的. 请大家自行下载安装.
二 Python的安装和设置
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_5fa86abce800de2.png)
安装基本上就是下一步, 下一步就好了. 中间安装路径, 我选择的是"C:\Python27\", 等下要用到这个路径.
右键单击“计算机”,选择“属性”----》“高级系统设置”,在“高级”选项卡下选择“环境变量”!
在“系统变量”下选中“Path”,并点击下方的编辑按钮:
在弹出的“编辑系统变量”对话框中编辑“变量值”,在“变量值”的后面添加Python的安装路径(C:\Python27\),用英文分号(;)将其与后面的其他内容隔开。
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_3b44613a91e0f12.png)
同样地,在“PATHEXT“的变量值中添加 .PY;.PYM .
打开cmd控制台,输入 python,如果出现如下提示,则说明python安装成功.
如果你设置环境变量前已经打开了cmd, 需要重新打开cmd.
三 创建Cocos2d-x 3.0rc0项目
在Cocos2d-x 3.0rc0中, 引入cocos2d-console这一新的Cocos2d-x工具.
在console中你可以完成2d-x的新建项目, 编译甚至在模拟器里面运行项目.
我们先来看下如何使用cocos2d-console创建新的项目.
我们将下载好的2d-x 3.0rc0解压到C:\cocos2d-x-3.0rc0.
我们打开cmd, 切换到C:\cocos2d-x-3.0rc0 目录
运行python setup.py.
中间会询问几个Android开发需要的地址, 我们今天不涉及Android开发, 直接回车跳过即可.
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_5b47c3af628df0f.png)
最后会提示我们重启电脑, 我们重启电脑.
接下来我们在C:\Work目录中创建新项目HelloCocos.
打开终端, 切换到C:\Work目录中.运行cocos new命令.
这里我们可以看到cocos new的用法.
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_a46d0f381caebf9.png)
我们接着输入命令 cocos new -p com.young40.hellococos -l cpp HelloCocos
其中-p是包名, -l 选择了cpp即C++开发, HelloCocos是项目名称.你可以替换为自己喜欢的名称.
我们打开C:\Work\HelloCocos\proj.win32\HelloCocos.sln, 如果提示升级项目, 选择确定即可.
点击F5, 运行项目. 稍等编译完成后, 我们就可以看到我们熟悉的HellWorld了.
四 在项目中添加CocoStudio支持
我们在VS中找到"解决方案资源管理器", 在解决方案"HelloCocos"上点击右键, 选择添加现有项目.
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_57e14df1de44199.png)
在弹出的对话框中选择C:\Work\HelloCocos\cocos2d\cocos\editor-support\cocostudio\proj.win32\libCocosStudio.vcxproj
然后继续添加C:\Work\HelloCocos\cocos2d\extensions\proj.win32\libExtensions.vcxproj
然后继续添加C:\Work\HelloCocos\cocos2d\cocos\ui\proj.win32\libGUI.vcxproj
然后我们在HelloCocos项目上点击右键选择添加引用
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_651226afdf3699e.png)
在弹出的对话框中选择添加引用, 并勾选libCocosStudio, libGUI和libExtensions后点击确定.
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_4860cea813fd6c8.png)
如果大家使用的是VS2012或者VS2013, 可能会看到项目被标记为VS2010, 这里我们升级下项目设置, 否则可能无法编译.
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_a3481d72619dbfe.png)
然后, 我们HelloCocos项目属性(点击右键选择属性)中选择 "配置属性" => "C/C++" => "附加包含目录" 并编辑.
添加下面几行
$(EngineRoot)cocos
$(EngineRoot)extensions
$(EngineRoot)cocos\editor-support\
$(EngineRoot)cocos\editor-support\cocostudio
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_c4695296f103bb1.png)
编译一下工程, 还是能运行吧. 如果遇到问题, 不妨来CocoaChina论坛的CocoStudio专区来继续交流.
五 添加代码
我们打开CocoStudio 1.3的动画编辑器, 打开一个HeroAnimation的示例, 并直接导出, 将导出的文件放C:\Work\HelloCocos\Resources下面.
我们打开HelloWorld.cpp给其添加引用以及命名空间
[align=left]#include "CocoStudio.h"[/align]
[align=left] [/align]
[align=left]using namespace cocostudio;[/align]
然后修改下HelloWorld::init函数, 在return前加入
[align=left]ArmatureDataManager::getInstance()->addArmatureFileInfo("Hero0.png" , "Hero0.plist" , "Hero.ExportJson");[/align]
[align=left] Armature *armature = Armature::create( "Hero");[/align]
[align=left] armature->setPosition(ccp(visibleSize.width * 0.5, visibleSize.height * 0.5));[/align]
[align=left] armature->getAnimation()->playWithIndex(0);[/align]
[align=left] this->addChild(armature);[/align]
[align=left] [/align]
[align=left] return true;[/align]
好了, 赶快运行下吧.
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/b54feac4780cabe5cc2b030bd26e87c2.png)
选择好后我们发现如下图,简单介绍了下功能
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/26dde0e8b1b4b20fa488e14c5974472d.png)
这里我们选中那个login按钮,发现这个按钮的实例名叫login_Button,这个名字我们等会代码里要用,然后我们保存一下
在保存路径下找到这个工程文件夹,打开
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/3a6c842841b76646c832e88569a06721.png)
有这些文件,我们把Json和Resources文件夹下的资源复制到cocos2dx中的资源文件夹中
这个json文件就是记录了这个widget的各种数据,cocos2dx会解析这些数据然后还原这个界面,感兴趣的可以打开研究下
好了到了代码阶段,我就简单的创建了个hellowZ喎�"http://www.2cto.com/kf/ware/vc/"
target="_blank"
class="keylink">vcmxko6y1q8rHztLDx9KqsNHI/bj2zeKyv7XEuaSzzL/itbzI69XiuPa94r72t72wuLKi0v3TwzxpbWcgc3JjPQ=="http://www.2cto.com/uploadfile/Collfiles/20141015/20141015085358140.png"
alt="\">并在头文件中包含
好了,下面就是代码了
?
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/db369463c8bd2f1655dd213bfdf9efd3.png)
点击按钮测试下
![](https://oscdn.geek-share.com/Uploads/Images/Content/202012/09/91cfe261095861afb298dbe1447d829c.png)
好的,完成
环境配置
给新建的Cocos2d-x 3.0rc0 的Win32工程添加CocoStudio库
管理提醒: 本帖被 young40 执行压帖操作(2014-03-18)
引用
[attachment=79619]
注:针对3.2及以前版本,3.3以后不需要引入CocosStudio库
前
天, 在CocoaChina 2014春季大会上, 激动人心的Cocos2d-x 3.0和CocoStudio 1.3发布了.
Cocos2d-x 3.0做出令人兴奋的性能, 易用性等一系列改进, CocoStudio 1.3带来了稳定性和新特性.
今天让我们看下如何在新建Cocos 3.0rc0的Win32的工程中添加CocoStudio的支持.
一 软件及其下载
1. Cocos2d-x 3.0rc
http://cdn.cocos2d-x.org/cocos2d-x-3.0rc0.zip
2. CocoStudio 1.3
在CocoStudio 1.3中可以直接创建Cocos2d-x项目, 所以这次的安装包有3个.
仅含CocoStudio 1.3
http://126.am/YDrVk1
CocoStudio 1.3包含了Cocos2d-x 3.0rc0
http://126.am/lorYp2
CocoStudio 1.3 包含了Cocos2d-x 2.2.3
http://126.am/eGo4f4
3. Python 2.7.6
Cocos2d-x的脚本用到了Python, Win下没有自带Python, 大家还需要下载Python.
Python的版本我这里推荐大家用最新的2.7.6. 因为Python的2.x和3.x不兼容, 所以一定不能用3.x的版本
大家可以根据自己的系统下载对应的版本.
https://www.python.org/download/releases/2.7.6/
4. Visual Studio
地球人都知道啦. 我今天演示采用的版本是Visual Studio 2013.
VS2010, VS2012, 下面提到的需要设置的地方, 都是相同的. 请大家自行下载安装.
二 Python的安装和设置
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_5fa86abce800de2.png)
安装基本上就是下一步, 下一步就好了. 中间安装路径, 我选择的是"C:\Python27\", 等下要用到这个路径.
右键单击“计算机”,选择“属性”----》“高级系统设置”,在“高级”选项卡下选择“环境变量”!
在“系统变量”下选中“Path”,并点击下方的编辑按钮:
在弹出的“编辑系统变量”对话框中编辑“变量值”,在“变量值”的后面添加Python的安装路径(C:\Python27\),用英文分号(;)将其与后面的其他内容隔开。
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_3b44613a91e0f12.png)
同样地,在“PATHEXT“的变量值中添加 .PY;.PYM .
打开cmd控制台,输入 python,如果出现如下提示,则说明python安装成功.
如果你设置环境变量前已经打开了cmd, 需要重新打开cmd.
三 创建Cocos2d-x 3.0rc0项目
在Cocos2d-x 3.0rc0中, 引入cocos2d-console这一新的Cocos2d-x工具.
在console中你可以完成2d-x的新建项目, 编译甚至在模拟器里面运行项目.
我们先来看下如何使用cocos2d-console创建新的项目.
我们将下载好的2d-x 3.0rc0解压到C:\cocos2d-x-3.0rc0.
我们打开cmd, 切换到C:\cocos2d-x-3.0rc0 目录
运行python setup.py.
中间会询问几个Android开发需要的地址, 我们今天不涉及Android开发, 直接回车跳过即可.
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_5b47c3af628df0f.png)
最后会提示我们重启电脑, 我们重启电脑.
接下来我们在C:\Work目录中创建新项目HelloCocos.
打开终端, 切换到C:\Work目录中.运行cocos new命令.
这里我们可以看到cocos new的用法.
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_a46d0f381caebf9.png)
我们接着输入命令 cocos new -p com.young40.hellococos -l cpp HelloCocos
其中-p是包名, -l 选择了cpp即C++开发, HelloCocos是项目名称.你可以替换为自己喜欢的名称.
我们打开C:\Work\HelloCocos\proj.win32\HelloCocos.sln, 如果提示升级项目, 选择确定即可.
点击F5, 运行项目. 稍等编译完成后, 我们就可以看到我们熟悉的HellWorld了.
四 在项目中添加CocoStudio支持
我们在VS中找到"解决方案资源管理器", 在解决方案"HelloCocos"上点击右键, 选择添加现有项目.
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_57e14df1de44199.png)
在弹出的对话框中选择C:\Work\HelloCocos\cocos2d\cocos\editor-support\cocostudio\proj.win32\libCocosStudio.vcxproj
然后继续添加C:\Work\HelloCocos\cocos2d\extensions\proj.win32\libExtensions.vcxproj
然后继续添加C:\Work\HelloCocos\cocos2d\cocos\ui\proj.win32\libGUI.vcxproj
然后我们在HelloCocos项目上点击右键选择添加引用
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_651226afdf3699e.png)
在弹出的对话框中选择添加引用, 并勾选libCocosStudio, libGUI和libExtensions后点击确定.
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_4860cea813fd6c8.png)
如果大家使用的是VS2012或者VS2013, 可能会看到项目被标记为VS2010, 这里我们升级下项目设置, 否则可能无法编译.
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_a3481d72619dbfe.png)
然后, 我们HelloCocos项目属性(点击右键选择属性)中选择 "配置属性" => "C/C++" => "附加包含目录" 并编辑.
添加下面几行
$(EngineRoot)cocos
$(EngineRoot)extensions
$(EngineRoot)cocos\editor-support\
$(EngineRoot)cocos\editor-support\cocostudio
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_c4695296f103bb1.png)
编译一下工程, 还是能运行吧. 如果遇到问题, 不妨来CocoaChina论坛的CocoStudio专区来继续交流.
五 添加代码
我们打开CocoStudio 1.3的动画编辑器, 打开一个HeroAnimation的示例, 并直接导出, 将导出的文件放C:\Work\HelloCocos\Resources下面.
我们打开HelloWorld.cpp给其添加引用以及命名空间
[align=left]#include "CocoStudio.h"[/align]
[align=left] [/align]
[align=left]using namespace cocostudio;[/align]
然后修改下HelloWorld::init函数, 在return前加入
[align=left]ArmatureDataManager::getInstance()->addArmatureFileInfo("Hero0.png" , "Hero0.plist" , "Hero.ExportJson");[/align]
[align=left] Armature *armature = Armature::create( "Hero");[/align]
[align=left] armature->setPosition(ccp(visibleSize.width * 0.5, visibleSize.height * 0.5));[/align]
[align=left] armature->getAnimation()->playWithIndex(0);[/align]
[align=left] this->addChild(armature);[/align]
[align=left] [/align]
[align=left] return true;[/align]
好了, 赶快运行下吧.
![](http://cdn.cocimg.com/bbs/attachment/Fid_48/48_105121_7cc4abbb9594ce5.png)
相关文章推荐
- cocos2d-js v3.6 关于处理图片锯齿、不清楚的处理方法
- Cocos2d C++ 解析CSV
- cocos2d-x里的关于C++的笔记
- cocos2dx3.4 new Lua项目后编译黑屏问题的解决
- cocos2dx精灵裁剪显示ClippingNode
- cocos飞机游戏地图滚动速度由快到慢的实现
- cocos2dx2.x&3.x部分函数对照表
- cocos2d-x3.7 cclabel文字破碎,异常,变乱
- COCOS学习笔记--内存管理(二)-PoolManager类和AutoreleasePool类的讲解
- COCOS学习笔记--内存管理(一)-引用计数和Ref类的讲解
- cocos2d-x3.2下使用Umeng 64位SDK注意事项
- cocos2d-x 3.0 正式版 项目创建
- CocosStudio文件解析工具CsdAnalysis
- COCOS-HTML5-3.9版本学习(二)HTML5的COCOS结构模板
- Cocos结构
- COCOS-HTML5-3.9版本学习(一)HTML5的COCOS环境
- cocos2dx 2.x与cocos2dx 3.x类库用法对比
- 安装cocos ide 遇到的问题
- Cocos在windows7下的配置与apk打包
- CocosBuilder使用记录