cocos2d-javascript试用小记

这几天在整理知易教程的第6个示例,代码基本上完成了,就是文字比较费劲。总觉得有些地方说的很啰嗦,但是意思却表达的不是非常清楚。所以寻思着弄点儿动态的效果到页面上。做GIF动画吧,好像挺麻烦的,还容易失真。用flash吧,好像有些浏览器看不到flash对吧。最近html5好像挺火的,操作canvas什么的要用javascript,从头开始,对于只会点儿基本语法的我,这个难度也不小。

忽然想起来cocos2d还有个网页版的叫cocos2d-javascript,如果大部分操作库函数都弄好了,百十行的调用还是难不到我的。

说干就干,下载,安装,看教程。

按照教程上说的先“Creating a New Project”,嘭,弹出个目录选择框,我建了个叫“cocos2d-javascript”的目录。

运行“Serve project.lnk”,然后打开浏览器,访问“http://localhost:4000/”。

然后我就看见大大的一行“Cocos2d Javascript”,下面跟着一个怨念的黑线框。

等了一会儿再看,还是这副熊样:

这回我确定它不是在加载资源了。

看了下脚本,终于找到问题的根源了。

 1 // Import the cocos2d module
 2 var cocos = require('cocos2d'),
 3 // Import the geometry module
 4     geo = require('geometry');
 5 
 6 // Create a new layer
 7 var Cocos2d-javascript = cocos.nodes.Layer.extend({
 8     init: function() {
 9         // You must always call the super class version of init
10         Cocos2d-javascript.superclass.init.call(this);
11 
12         // Get size of canvas
13         var s = cocos.Director.get('sharedDirector').get('winSize');
14 
15         // Create label
16         var label = cocos.nodes.Label.create({string: 'Cocos2d Javascript', fontName: 'Arial', fontSize: 76});
17 
18         // Add label to layer
19         this.addChild({child: label, z:1});
20 
21         // Position the label in the centre of the view
22         label.set('position', geo.ccp(s.width / 2, s.height / 2));
23     }
24 });
25 
26 exports.main = function() {
27     // Initialise application
28 
29     // Get director
30     var director = cocos.Director.get('sharedDirector');
31 
32     // Attach director to our <div> element
33     director.attachInView(document.getElementById('cocos2d_javascript_app'));
34 
35     // Create a scene
36     var scene = cocos.nodes.Scene.create();
37 
38     // Add our layer to the scene
39     scene.addChild({child: Cocos2d-javascript.create()});
40 
41     // Run the scene
42     director.runWithScene(scene);
43 };

注意看第7行,这怨念的变量名啊。创建Project的程序直接拿我文件夹的名字做变量名了。

老老实实地跟着教程创建那个叫“breakout”的目录,世界终于恢复了和平。。。


话说,cocos2d-html5昨天放出了第一个版本,赶快去试用一下,为我的下一篇博文做准备呀。

Cocos2d-html5 alpha released

Download link:
http://cocos2d-x.googlecode.com/files/cocos2d-html5-v0.5.0-alpha.zip

Getting Started with Cocos2d-html5

posted @ 2012-05-30 21:15 Bugs Bunny 阅读(...) 评论(...) 编辑 收藏