13522人阅读
游戏开发（170）
游戏（158）
网络游戏（137）
实战（126）
我们的编写的第一个Cocos2d-JS程序，命名为HelloJS，从该工程开始学习其它的内容。创建工程我们创建Cocos2d-JS工程可以通过Cocos2d-x提供的命令工具cocos实现，但这种方式不能与WebStorm或Cocos Code IDE集成开发工具很好地集成，不便于程序编写和调试。由于Cocos Code IDE工具是Cocos2d-x开发的专门为Cocos2d-JS和Cocos2d-x Lua开发设计的，因此使用Cocos Code IDE工具很方便创建Cocos2d-JS工程。首先我们需要在Cocos Code IDE工具中先配置JavaScript框架，打开Cocos Code IDE工具，选择菜单Window→Preferences，弹出对话框如下图所示，选择Cocos→JavaScript在右边的JavaScript Frameworks中选择&Cocos2d-JS引擎目录&。配置JavaScript框架JavaScript框架配置不需要每次都进行，只是在最开始的配置一下，但创建工程的时候，Cocos Code IDE工具会从这个JavaScript框架目录中创建工程文件。接下来我们就可以创建JavaScript工程了，选择菜单File→New→Project，如下图所示，弹出项目类型选择对话框。项目类型选择对话框我们选中Cocos JavaScript Project，然后点击Next按钮，弹出如下图所示的对话框。我们在Project Name项目中输入工程名称，Create Project in Workspace是在Workspace目录中创建工程，我们需要选中该项目，Create From Existing Resource项目选中可以让我们从已经存在的工程创建，现在我们不需要选中该项目。选择完成点击Next按钮进入到如下图所示配置运行环境对话框，在该对话框中我们可以配置项目运行时信息。Orientation项目是配置模拟器的朝向，其中landscape是横屏显示，portriat是竖屏显。Desktop Runtime Settings中的Title是设置模拟器的标题，Desktop Windows initialize Size是设置模拟器的大小。Add Native Codes是设置添加本地代码到工程，在本来中我们不需要添加本地代码。最后点击Finish按钮完成创建操作，创建好工程之后，如下图所示。新建项目对话框配置运行环境对话框创建工程成功界面Cocos Code IDE中运行创建好工程后我们可以测试一下，在左边的工程导航面板中选中index.html文件，右键菜单中选择Run As→Cocos JSBinding运行我们刚刚创建的工程，运行结果如下图所示。运行工程界面我们主要编写的程序代码是在src目录下，在本例中app.js文件负责处理主要的如上图场景界面逻辑。如果我们想调试程序，可以设置断点，如下图所示，点击行号之前的位置，设置断点。设置断点调试运行过程，右键菜单中选择Debug As→Cocos JSBinding菜单。如下图所示，程序运行到第32行挂起，并进入调试视图，在调试视图中我们可以查看程序运行的堆栈、变量、断点、计算表达式和单步执行程序等操作。运行到断点挂起在调试视图中调试工具栏的按钮，主要调试按钮说明如下图所示。调试工具栏按钮WebStorm中运行Cocos Code IDE工具提供的运行是本地运行，即Cocos2d-JS程序通过JSB在本地运行。如果我们需要测试Web浏览器上运行情况，需要使用WebStorm工具，由于我们已经在Cocos Code IDE创建了工程我们不需要再创建了，但是需要进入到WebStorm中进行设置，创建文件在本地WebStorm工程，为了能与Cocos Code IDE共用相同工程我们需要设置WebStorm的Project Root为Cocos Code IDE的Workspace目录。设置完成界面如图下所示，其中的HelloJS是我们要运行的工程，右键选择HelloJS中的index.html文件就可以运行了，过。运行结果如下图所示。设置完成界面在浏览器中运行工程文件结构我们创建的HelloJS工程已经能够运行起来了，下面我们介绍一下HelloJS工程中的文件结构，我们使用Cocos Code IDE打开HelloJS工程，左侧的导航面板如下图所示。HelloJS工程中的文件结构在上图所示导航面板中，res文件夹存放资源文件的，src文件夹是主要的程序代码，其中的app.js是实现游戏场景的JavaScript文件，resource.js定义资源对应的变量。HelloJS根目录下还有config.json、project.json、index.html和main.js，config.json保存模拟器运行配置信息，在我们创建工程时候生成，project.json是项目的配置信息，index.html是Web工程的首页，main.js与首页index.html对应的JavaScript文件。代码解释HelloJS工程中有很多文件下面我们详细解释一下它们内部的代码：&1、index.html文件index.html文件只有在Web浏览器上运行才会启动它，index.html代码如下：&!DOCTYPE html&
&meta charset=&utf-8&&
&title&Cocos2d-html5 Hello World test&/title&
&link rel=&icon& type=&image/GIF& href=&res/favicon.ico&/&
&meta name=&apple-mobile-web-app-capable& content=&yes&/&
&meta name=&full-screen& content=&yes&/&
&meta name=&screen-orientation& content=&portrait&/&
&meta name=&x5-fullscreen& content=&true&/&
&meta name=&360-fullscreen& content=&true&/&
body, canvas, div {
-moz-user-select:
-webkit-user-select:
-ms-user-select:
-khtml-user-select:
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
&body style=&padding:0; margin: 0; background: #000;&&
&canvas id=&gameCanvas& width=&800& height=&450&&&/canvas&
&script src=&frameworks/cocos2d-html5/CCBoot.js&&&/script&
&script src=&main.js&&&/script&
&/html&上述代码第①~②行是设置网页的meta信息，meta信息是网页基本信息，这些设置能够使得index.html网页很好地在移动设备上显示。第③行代码放置一个canvas标签，canvas标签是HTML5提供的，通过JavaScript 可以在Canvas上绘制 2D 图形，Cocos2d-JS在网页运行的游戏场景都是通过Canvas渲染出来的，Cocos2d-JS的本地运行游戏场景的渲染是通过OpenGL渲染出来的，事实上HTML5也有类似于OpenGL渲染技术，它是WebGL但是考虑到浏览器的支持程度不同，Cocos2d-JS没有采用WebGL渲染技术而是Canvas渲染，虽然Canvas渲染速度不及WebGL，但是一般的网页游戏都能满足要求。第④行代码是导入JavaScript文件CCBoot.js，我们不需要维护该文件。第⑤行代码是导入JavaScript文件main.js，我们需要维护该文件。2、main.js文件main.js负责启动游戏场景，无论Web浏览器运行还是本地运行都是通过该文件启动游戏场景的，main.js代码如下：cc.game.onStart = function(){
cc.view.adjustViewPort(true);
cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
cc.view.resizeWithBrowserSize(true);
//load resources
cc.LoaderScene.preload(g_resources, function () {
cc.director.runScene(new HelloWorldScene());
cc.game.run();
⑦上述代码第①行是启动游戏，cc.game是一个游戏启动对象。代码第②~④行是设置游戏视图属性，其中第③行是设置游戏视图大小，它涉及到屏幕适配问题，cc.ResolutionPolicy.SHOW_ALL是屏幕适配策略。第⑤行代码是加载游戏场景所需要资源，其中g_resources参数是加载资源的数组，该数组是在src/resource.js文件中定义的。第⑥行代码是运行HelloWorldScene场景，cc.director是导演对象，运行HelloWorldScene场景会进入到该场景。第⑦行代码cc.game.run()是运行游戏启动对象。3、project.json文件项目配置信息project.json文件代码如下：{
&project_type&: &javascript&,
&debugMode& : 1,
&showFPS& : true,
&frameRate& : 60,
&id& : &gameCanvas&,
&renderMode& : 0,
&engineDir&:&frameworks/cocos2d-html5&,
&modules& : [&cocos2d&],
&jsList& : [
&src/resource.js&,
&src/app.js&
}project.json文件采用JSON字符串表示，我们重点关注有标号的语句，其中第①行代码是设置是否显示帧率调试信息，帧率调试就是显示在左下角文字信息。第②行代码是设置帧率为60，即屏幕1/60秒刷新一次。第③行代码是加载游戏引擎的模块，Cocos2d-JS引擎有很多模块，模块的定义是在HelloJS\frameworks\cocos2d-html5\moduleConfig.json，我们在资源管理器中才能看到该文件，这些模块在场景启动的时候加载，因此一定要根据需要导入，否则造成资源的浪费。例如我们再添加一个chipmunk物理引擎模块，代码第③可以修改如下形式：&modules& : [&cocos2d&,&chipmunk&]代码第④～⑥行是声明需要加载的JavaScript文件，这里的文件主要是有我们编写的，我们每次添加一个JavaScript文件到工程中，就需要在此处添加声明。4、config.json文件只有在Cocos Code IDE中运行才需要该文件，它是配置模拟器运行信息的，该文件在工程发布时候和Web环境下运行都没有用处。但如果想Cocos Code IDE中运行，并改变模拟器大小和方向，可以修改该文件，config.json文件代码如下：{
&init_cfg&: {
&isLandscape&: true,
&name&: &HelloJS&,
&width&: 960,
&height&: 640,
&entry&: &main.js&,
&consolePort&: 6050,
&debugPort&: 5086,
&forwardConsolePort&: 10088,
&forwardUploadPort&: 10090,
&forwardDebugPort&: 10086
&simulator_screen_size&: [
&title&: &iPhone 3Gs (480x320)&,
&width&: 480,
&height&: 320
}上述代码第①行是初始配置信息，其中第②行是设置横屏显示还是竖屏显示，第③行代码name属性是设置模拟器上显示的标题，第④和⑤行是设置屏幕的宽和高，第⑥行代码是设置入口文件。5、resource.js文件resource.js文件是在src文件夹中，处于该文件夹中的文件是由我们来维护的。在resource.js文件中定义资源对应的变量。resource.js文件代码如下：var res = {
HelloWorld_png : &res/HelloWorld.png&,
CloseNormal_png : &res/CloseNormal.png&,
CloseSelected_png : &res/CloseSelected.png&
var g_resources = [];
for (var i in res) {
g_resources.push(res[i]);
}上述代码第①行是定义JSON变量res，它为每一个资源文件定义一个别名，在程序中访问资源，资源名不要“写死[ 写死被称为硬编码（英语：Hard Code或Hard Coding），硬编码指的是在软件实作上，把输出或输入的相关参数（例如：路径、输出的形式或格式）直接以常量的方式书写在源代码中，而非在运行时期由外界指定的设置、资源、数据或格式做出适当回应。——引自于维基百科 http://zh.wikipedia.org/zh-cn/%E5%AF%AB%E6%AD%BB]”，而是通过一个可配置的别名访问，这样当环境变化之后修改起来很方便。第②行代码是定义资源文件集合变量g_resources，它的的内容是通过代码第③行把res变量中的资源文件循环添加到g_resources中。当然我们可以采用下面逐一添加：var g_resources = [
res.HelloWorld_png,
res.CloseNormal_png,
&res/CloseSelected.png&
];放在g_resources变量这的资源，会在场景其中的时候加载的，在Web浏览器下运行如果加载的资源找不到会报出404错误。6、app.js文件app.js文件是在src文件夹中，处于该文件夹中的文件是由我们来维护的，我们看到的图3-27所示的场景是在app.js中实现的，app.js代码如下：&var HelloWorldLayer = cc.Layer.extend({
sprite:null,
//定义一个精灵属性
ctor:function () {
//构造方法
this._super();
//初始化父类
var size = cc.winS
//获得屏幕大小
var closeItem = new cc.MenuItemImage(
res.CloseNormal_png,
res.CloseSelected_png,
function () {
cc.log(&Menu is clicked!&);
closeItem.attr({
x: size.width - 20,
anchorX: 0.5,
anchorY: 0.5
var menu = new cc.Menu(closeItem);
//通过closeItem菜单项创建菜单对象
menu.x = 0;
menu.y = 0;
this.addChild(menu, 1); //把菜单添加到当前层上
var helloLabel = new cc.LabelTTF(&Hello World&, &Arial&, 38); //创建标签对象
helloLabel.x = size.width / 2;
helloLabel.y = 0;
this.addChild(helloLabel, 5);
this.sprite = new cc.Sprite(res.HelloWorld_png); //创建精灵对象
this.sprite.attr({
x: size.width / 2,
y: size.height / 2,
scale: 0.5,
rotation: 180
this.addChild(this.sprite, 0);
this.sprite.runAction(
cc.sequence(
cc.rotateTo(2, 0),
cc.scaleTo(2, 1, 1)
//在精灵对象上执行一个动画
helloLabel.runAction(
cc.moveBy(2.5, cc.p(0, size.height - 40)),
cc.tintTo(2.5,255,125,0)
//在标签对象上执行一个动画
var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new HelloWorldLayer();
this.addChild(layer); //把HelloWorldLayer层放到HelloWorldScene场景中
}); 我们在app.js文件中声明了两个类HelloWorldScene（见代码第①行）和HelloWorldLayer（见代码第⑦行），然后通过HelloWorldScene实例化HelloWorldLayer，见代码第⑩行。HelloWorldScene是场景，HelloWorldLayer是层，场景包含若干个层，关于场景和层我们会在下一节再具体介绍。另外，上述代码第②行是是创建一个图片菜单项对象，点击该菜单项的时候回调function方法。提示 &cc.MenuItemImage中res.CloseNormal_png和res.CloseSelected_png变量是在resource.js文件中定义的资源文件别名，以后res.开通变量都是资源文件的别名，不再详细解释。第③行代码是菜单项对象的位置，其中closeItem.attr({…})语句可以设置多个属性，类似的还有代码第⑥行，采用JSON格式表示，x属性表示x轴坐标，y属性表示y轴坐标，anchorX表示x轴锚点，anchorY表示y轴锚点，关于锚点的概念后面小节介绍。关于精灵x和y轴属性，我们也可以通过代码④和⑤方式设置。还有上述代码第⑧行是声明onEnter方法，它是在进入HelloWorldScene场景时候回调的。onEnter方法是从重写父类的方法，我们必需通过this._super()语句调用父类的onEnter方法，见代码第⑨行所示。更多内容请关注最新Cocos图书《Cocos2d-x实战：JS卷——Cocos2d-JS开发》本书交流讨论网站：欢迎加入Cocos2d-x技术讨论群：更多精彩视频课程请关注智捷课堂Cocos课程：智捷课堂现推出Cocos会员，敬请关注：《Cocos2d-x实战 JS卷》现已上线，各大商店均已开售：京东：欢迎关注智捷iOS课堂微信公共平台，了解最新技术文章、图书、教程信息
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
技术讨论群cocos群：7760386；iOS学习讨论qq群：4462948 技术讨论论坛，关东升图书读者qq群：
访问：1684236次
积分：19620
积分：19620
排名：第412名
原创：368篇
转载：37篇
评论：325条
文章：78篇
阅读：371987
文章：10篇
阅读：27378
文章：54篇
阅读：328522
(3)(4)(11)(12)(13)(10)(18)(15)(11)(9)(20)(1)(2)(20)(15)(15)(20)(13)(16)(16)(1)(4)(4)(10)(14)(11)(8)(8)(3)(8)(6)(5)(5)(1)(4)(1)(13)(7)(8)(2)(19)(6)(1)(1)(6)(2)(3)cocos2d-x中getChildByName和Helper::seekWidgetByName的区别 -
- ITeye博客
使用cocostudio的时候，可以通过如下代码来获取一个控件
方法一：
auto myLayout = cocostudio::GUIReader::getInstance()-&widgetFromJsonFile("testUI.json");
this-&addChild(myLayout);
Button* loginBtn = (Button*)(myLayout-&getChildByName("login"));
Button* testBtn = (Button*)(Helper::seekWidgetByName(myLayout,"TestButton"));
对象结构如下图附件所示：
getChildByName是按照数结构进行查找，只能查找父对象下面的子对象，而不能跨级查找。相反，Helper::seekWidgetByName可以在整个对象结构中直接查找。
ps:cocostudio中的文本框类型在2dx3.2中为Text类型
houyingsoft
浏览: 61045 次
来自: 北京
Java里AnalyzePDB类是从哪里来的
wangxiulong2008 写道设置优先级？如果是优先级， ...
楼主怎么做到的啊
我也遇到相同问题
楼主求教啊！
请问楼主，你是怎么做的？可以指教下吗？一 使用浏览器chrome打开程序，进行调试。跟普通js程序一样。
要么自行搭建服务器，利用python脚本，或者用其他服务器程序（LAMP或XAMPP）。然后用浏览器打开服务器地址。
要么直接使用cocos提供好的命令行：cocos run &p web
浏览器调试好处是，方便，对于小程序或者非native代码是非常有意义的。但部署到真机后遇到的问题，这就无法解决了，而且一些native代码也无法调试。
二 使用firefox远程调试。
因为cocos2d-js使用spidermonkey作为js解析引擎，这个玩意就是mozilla派的，所以用firefox做远程调试。题外话。。。这让firefox在chrome如日中天的年代又找到了点存在感啊~~~真怀念。
可以参考大牛的文章：
&& 不过大牛这里的配图有个缺陷，连接手机的地址没有说明。127.0.0.1是用本机模拟器运行时才用到的，如果是真机，必须是手机的网络地址。这可以让开发机和手机在同一个wifi网络中，然后到路由器里边找找手机的ip，也可以用开发机ping一下。
调试步骤：
1 firefox 新版（测试在V27）
2 打开cocos2d程序的debug
&&&&&&&&&&&&&& 在AppDelegate.cpp（在framework里边），改写AppDelegate::applicationDidFinishLaunching()函数，在sc-&start()后面加入sc-&enableDebugger()的调用
bool AppDelegate::applicationDidFinishLaunching()
// initialize director
Director *director = Director::getInstance();
director-&setOpenGLView(EGLView::getInstance());
// turn on display FPS
director-&setDisplayStats(true);
// set FPS. the default value is 1.0/60 if you don't call this
director-&setAnimationInterval(1.0 / 60);
ScriptingCore* sc = ScriptingCore::getInstance();
sc-&addRegisterCallback(register_all_cocos2dx);
sc-&addRegisterCallback(register_all_cocos2dx_extension);
sc-&addRegisterCallback(register_cocos2dx_js_extensions);
sc-&addRegisterCallback(register_all_cocos2dx_extension_manual);
sc-&addRegisterCallback(jsb_register_chipmunk);
sc-&addRegisterCallback(JSB_register_opengl);
sc-&addRegisterCallback(jsb_register_system);
sc-&start();
#if defined(COCOS2D_DEBUG) && (COCOS2D_DEBUG & 0)
sc-&enableDebugger();
ScriptEngineProtocol *engine = ScriptingCore::getInstance();
ScriptEngineManager::getInstance()-&setScriptEngine(engine);
ScriptingCore::getInstance()-&runScript("cocos2d-jsb.js");
return true;
3 编译运行 cocos run &p android
4 firefox连接手机
在FireFox中，连接功能的菜单项缺省是被隐藏的，我们需要改一下浏览器配置。
这样菜单项就显示出来了，然后。
然后，我们把调试器和设备连接起来：（地址填手机的网络地址，图中127.0.0.1是因为模拟器运行；端口必须是5086）
弹出一个新窗口，表示连接成功。基本1s内就连接成功了，如果不成功，再检查一下cocos程序是否在运行，或者手机ip地址是否正确，或者开发机和手机是否在同一个子网。
5 开始调试
点debugger调试器开始调试。
这个方法也有一定缺陷，也就是必须在cocos程序启动后才能调试。启动过程中做的事情，就不好捕捉了。。。这时候需要用cc.log配合一下了。具体方法请参考前一篇日志。
阅读(...) 评论()cocos2d-js控件常用创建方法和坐标转换一览表
var sprite = new cc.Sprite(res.);
sprite.setPosition(, );
this.addChild(sprite);
var label = new cc.LabelTTF(&&, &&, 30);
label.x = ;
label.y = ;
this.addChild(label);
var atlas = new cc.LabelAtlas(&&, res., , , &&);
atlas.x = ;
atlas.y = ;
this.addChild(atlas);
图片菜单项
var item = new cc.MenuItemImage(res.,
this.menuItemCallback,
item.x = ;
item.y = ;
menuItemCallback:function(sender){
cc.log(&menuItemStartCallback&)
var menu = new cc.Menu(item);
menu.x = ;
menu.y = ;
this.addChild(menu);
{cc.Point} convertToNodeSpace(worldPoint);//将世界坐标转换为模型坐标。
{cc.Point} convertToNodeSpaceAR(worldPoint);//将世界坐标转换为模型坐标。AR表示相对于锚点。
{cc.Point} convertTouchToNodeSpace(touch);//将世界坐标中触摸点转换为模型坐标。
{cc.Point} convertTouchToNodeSpaceAR(touch);//将世界坐标中触摸点转换为模型坐标。AR表示相对于锚点。
{cc.Point} convertToWorldSpace(nodePoint);//将模型坐标转换为世界坐标。
{cc.Point} convertToWorldSpaceAR(nodePoint);//将模型坐标转换为世界坐标。AR表示相对于锚点。