首先我们打开官方网站www.cocos2d-x.org,下载我们安装最新的cocostudio(cocos)。

简介:

Cocos Studio升级为cocos。更优秀的产品、更优质的服务。游戏开发一站式解决方案, 低成本、高效率;高性能,一次制作,多终端平台共享;Windows与Mac同步发布更新,团队协作更容易;丰富的插件素材库,游戏开发更灵活更便捷。

下载并安装好之后我们就可以进行一下步骤了:

1,准备我们所需要的素材资源

2,做一个背景地图

3,做角色头像面板

4,做一个音乐开关按钮

5,在头像面板上使用自定义美术字体和系统字体

然后,我们到出.Json工程文件及资源文件。

接下来我们看在Cocos2dx-Js中是怎么来使用导出的工程文件的

首先看一下JS-test中,的一段基类的调用代码:

_parseUIFile: function(file){
if(cocoStudioOldApiFlag == 0){
cc.log("ccs.load : %s", file);
var json = ccs.load(file);
return json.node;
}else{
cc.log("ccs.uiReader.widgetFromJsonFile : %s", file);
return ccs.uiReader.widgetFromJsonFile(file)
}
},

OK,里面有一个判断,cocoStudioOldApiFlag标识意思为,如果你用的是新版的Cocostudio那么必须使用新的AIP调用接口,

如果是老版本,那么使用以前的接口;

据我实验了几个版本之后得出以下结论,避免大家走弯路:

Cocostudio2.1.0 以上需要使用新的接口:

 var json = ccs.load(file);

而这边json对象只是一个根节点,我们真正的root节点需要单独取出来;

var root = json.node;

Cocostudio2.1.0 以下需要使用老的接口:

var root = ccs.uiReader.widgetFromJsonFile(file);

好了,刚才我们已经下载了Cocostudio2.2.5目前最新的版本,并且生成了.json

在我们自己的工程基类中添加以下代码:

BaseLayer.js基类中添加:

setUIFile_File:function(file){
var json = ccs.load(file);
return json.node;
},
setUIFile_JSON:function(file){
return ccs.uiReader.widgetFromJsonFile(file);
},

添加了setUIFile_File和setUIFile_JSON两个方法,很明确,新版本的用第一个,后半本的用第二个;

那么我们就继续在MainLayer中实现我们的调用:

 var UIroot = this.setUIFile_File(resJSON.Main_JSON);
UIroot.setAnchorPoint(cc.p(0.5,0.5));
UIroot.setPosition(this.getContentSize().width/2,this.getContentSize().height/2);
this.addChild(UIroot,1);

通过this.setUIFile_File(路径)这样就完成了我们cocostuido生成界面文件的绑定;

那么如何取得里面的自定义Node原件呢?

 var lv_100 = ccui.helper.seekWidgetByName(UIroot, "lv_100");
lv_100.setString("等级:1");

通过ccui.helper.seekWidgetByName(根节点,自定义控件名);就能取得到该控件的对象了

然后就可以进行相应的赋值或者是绑定事件关系!

OK我们跑起来看一我们使用cocostudio制作出来的UI界面!

效果还是很不错的!很赞!

cocostudio能大大提高我们工作的效率,而且这类工具可以提交给策划,美术使用,不需要写代码。

所见即说得的可视化编辑界面,只需要实现我们的界面布局就能完成我们以前大量的代码工作!

源码下载:

下载地址(百度云盘)

源码使用方法:

自己创建新工程,解压下载的文件,将所有文件拷贝到你新工程的目录下全部覆盖既可以运行!

 
 
 
 
 

【Cocos2d-Js基础教学(4)cocostudio在cocos2dx-Js中的使用】的更多相关文章

  1. 01慕课网《进击Node.js基础(一)》Node.js安装,创建例子

    版本:偶数位为稳定版本,基数为非稳定版本 - 0.6.x - 0.7.x    - 0.8.x -0.9.x    -0.10.x  -0.11.x 概念:Node.js采用谷歌浏览器的V8引擎,用C ...

  2. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  3. HTML+CSS+JS基础知识

    HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...

  4. AJAX学习前奏----JS基础加强

     AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...

  5. js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  6. 【Cocos2d-Js基础教学 入门目录】

    本教程视地址频在: 九秒课堂 完全免费 从接触Cocos2dx-Js以来,它的绽放的绚丽让我无法不对它喜欢.我觉得Js在不断带给我们惊喜:在开发过程中,会大大提升我们对原型开发的利用率,使用Js语言做 ...

  7. 【COCOS2DX-LUA 脚本开发之一】在Cocos2dX游戏中使用Lua脚本进行游戏开发(基础篇)并介绍脚本在游戏中详细用途!

    [COCOS2DX-LUA 脚本开发之一]在Cocos2dX游戏中使用Lua脚本进行游戏开发(基础篇)并介绍脚本在游戏中详细用途! 分类: [Cocos2dx Lua 脚本开发 ] 2012-04-1 ...

  8. Cocos2dx+lua合适还是Cocos2dx+js合适?

    问题: 开发cocos2dx手游Cocos2dx+lua合适还是Cocos2dx+js合适 百牛信息技术bainiu.ltd整理发布于博客园 回答: 作者:廖宇雷链接:https://www.zhih ...

  9. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  10. JS基础学习(一)

    首先感谢 http://www.w3school.com.cn/js/index.asp 学js真的很方便,&下面的内容其实是我自己做的一个备忘 第一节 大致了解 一 js基本介绍 1.轻量级 ...

随机推荐

  1. 【原创】注册assembly 到GAC

    http://msdn.microsoft.com/en-us/library/dkkx7f79.aspx http://stackoverflow.com/questions/2182316/how ...

  2. 配置Windows 2008 R2 64位 Odoo 8.0 源码PyCharm开发调试环境

    安装过程中,需要互联网连接下载python依赖库: 1.安装: Windows Server 2008 R2 x64标准版 2.安装: Python 2.7.10 amd64 到C:\Python27 ...

  3. (转)【ASP.NET Web API】Authentication with OWIN

    概述 本文说明了如何使用 OWIN 来实现 ASP.NET Web API 的验证功能,以及在客户端与服务器的交互过程中,避免重复提交用户名和密码的机制. 客户端可以分为两类: JavaScript: ...

  4. Dynamic CRM 2013学习笔记(二十三)CRM JS智能提示(CRM 相关的方法、属性以及页面字段),及发布前调试

    我们知道在CRM的js文件里引用XrmPageTemplate.js后,就可以实现智能提示,但每个js文件都引用太麻烦了,其实可以利用vs的功能让每个js文件自动实现智能提示CRM的js: 另外,我们 ...

  5. C#设计模式(10)——组合模式(Composite Pattern)

    一.引言 在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象 ...

  6. 《JavaScript语言精粹》学习笔记

    一.in的用法 for...in 枚举一个对象的所有可枚举属性 检测DOM/BOM属性 if ("onclick" in elem) { // 元素支持onclick } if ( ...

  7. android selector(如对TextView点击样式改变)

    selector 1.selector 从单词的意思来说:选择者,选择器,就是对你的目标的控制. 从API来说: A controller for the selection of Selectabl ...

  8. Web API 简单示例

    一.RESTful和Web API Representational State Transfer (REST) is a software architecture style consisting ...

  9. mysql join 查询图

    mysql join 查询,特别是对查两个表之间的差集,可以用table字段=null来做. 注意千万不是join on XX!=XX  ,这样出来的结果是错误的.

  10. gulp学习笔记2

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度 ...