在ios真机上运行cocos2d-html5-2.2自带的HelloHTML5World

现在的位置: 首页 > 综合 > 正文

在ios真机上运行cocos2d-html5-2.2自带的HelloHTML5World

2014年09月05日 ⁄ 综合 ⁄ 共 3822字 ⁄ 字号小中大 ⁄ 评论关闭

cocos2d-html5最令人心动的地方就是：官方号称一次js端编写，不需要修改(注:实际上是不可能的)或者少量修改，就能同时在web，ios和android上都能运行。
想象一下，每一次的修改，不需要等待编译，直接在浏览器里面F5刷新即可，那是多么的体面啊！

心动不如行动，但是一动，才发现cocos2d-x v2.2的坑，真是太多了！

(另开一帖:http://blog.csdn.net/wk3368/article/details/14112321)

cocos2d-html5 v2.2的环境搭建很简单，请参考老外的文档(cocos2d-x官网的已经提示过期即将修改了):

http://www.gamefromscratch.com/post/2012/06/04/Cocos2D-HTML5-tutorial-1-Getting-set-up-and-running.aspx

本机的webweb服务器xampp for mac 1.7.3，主目录路径:/Applications/XAMPP/xamppfiles/htdocs/cocos2d-html5

访问地址是:http://cocos2d-html5/HelloHTML5World/index.html

效果如图:

接下来，就是要在ios真机上运行这个demo!

软件版本:
cocos2d-x v2.2 下载地址:http://cdn.cocos2d-x.org/cocos2d-x-2.2.zip
cocos2d-html5 v2.2 下载地址:http://cdn.cocos2d-x.org/Cocos2d-html5-v2.2.zip

ios开发环境:
mac os 10.9
Xcode 5.0.1
IOS SDK 7.0

测试设备：
iphone5 with ios6.1
ipad4 with ios6.1

step1：在cocos2d-x-2.2里面，用命令行新建javascript版本的项目HelloHTML5World

$ cd /Users/wenke/Documents/cocos2d/cocos2d-x-2.2/tools/project-creator
$ ./create_project.py -project HelloHTML5World -package com.xxx.HelloHTML5World -language javascript
proj.ios : Done!
proj.android : Done!
proj.win32 : Done!
New project has been created in this path: /Users/wenke/Documents/cocos2d/cocos2d-x-2.2/projects/HelloHTML5World

Have Fun!

注：Bound ID里面不能有下划线，所以com.xxx.Hello_HTML5_World是不允许的。否则编译会报错.

step2：用xcode打开/Users/wenke/Documents/cocos2d/cocos2d-x-2.2/projects/HelloHTML5World/proj.ios/HelloHTML5World

1.在xcoce里面，选中Resources下面的res和src两个目录，右键->删除，弹出提示选择“Move to trash”

2.打开finder，将/Applications/XAMPP/xamppfiles/htdocs/cocos2d-html5/HelloHTML5World/下面的res和src两个目录选中，拖拽到xcode里面的Resources下面。注意弹出提示里面，选择"Create folder references for any added folders", 这样才能保证只修改html5端的js，ios和android平台都生效!

其他选项如图：

3.在xcode里面，修改Resources下面的main.js：
var myScene = new myScene();
替换成:
var myScene = new HelloWorldScene();

step3:将iphone连上mac，在xcode里面，选择在iphone上运行，iphone上显示cocos2d-x的界面，然后进入游戏就是黑屏！查看xocde里面的log，发现提示：
Cocos2d: JS: /var/mobile/Applications/263F99AA-C3A4-4049-A822-0B0EB55F8BEF/HelloHTML5World.app/src/myApp.js:134:TypeError: cc.PointZero is not a function
解决办法:
1.编辑/Applications/XAMPP/xamppfiles/htdocs/cocos2d-html5/HelloHTML5World/src/myApp.js，查找：
cc.PointZero()
替换成:
cc.p(0,0)

2.前一种办法可行，但是不可能以后每个js都不用cc.PointZero函数。于是我选择直接编辑cocos2d-x的源文件,一劳永逸：
/Users/wenke/Documents/cocos2d/cocos2d-x-2.2/scripting/javascript/bindings/js/jsb_cocos2d.js
在cc.pointEqualToPoint 前面添加一个
cc.PointZero = function () {
return cc.p(0, 0);
};

step4:再次运行，iphone上进入游戏之后，还是黑屏！查看xocde里面的log，发现新提示：
Cocos2d: Assert failed: No shader program set for this node
Assertion failed: (getShaderProgram()), function draw, file /Users/wenke/Documents/cocos2d/cocos2d-x-2.2/cocos2dx/sprite_nodes/CCSprite.cpp, line 554.
解决办法:

google没有找到解决办法，只好选择不在页面的左上角显示时钟。

编辑/Applications/XAMPP/xamppfiles/htdocs/cocos2d-html5/HelloHTML5World/src/myApp.js，将下面这段注释掉:

this.circle = new CircleSprite();
this.circle.setPosition(cc.p(40, size.height - 60));
this.addChild(this.circle, 2);
this.circle.schedule(this.circle.myUpdate, 1 / 60);

在Cocos2d-x官网论坛上提问之后，http://www.cocos2d-x.org/forums/19/topics/38502

作者对此的回答是：
Oh, yes.
Because it has not been supported to override native function in Javascript binding, for example Sprite's draw and visit function, so it causes this problem.
We'll remove CircleSprite from HelloHTML5World soon.
Thanks for your noticing.
David

step5:再次运行，一切正常。iphone上可以看到HelloHTML5World的页面了。换成ipad4，运行，也可以正常显示。

step6：检验一下，js端一次编辑，web和ios都能运行。
编辑/Applications/XAMPP/xamppfiles/htdocs/cocos2d-html5/HelloHTML5World/src/myApp.js，将
this.helloLabel = cc.LabelTTF.create("Hello World", "Arial", 38);
改成:
this.helloLabel = cc.LabelTTF.create("Hello World 3", "Arial", 38);

1.在浏览器里面刷新，“Hello World 3”出现了。
2.在xcode里面，先选择Product->clean（非常重要，否则js里面的修改不起作用），然后再Run，iphone上也显示“Hello World 3”了。