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”，下面跟着一个怨念的黑线框。

等了一会儿再看，还是这副熊样：



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

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

// Import the cocos2d module
var cocos = require('cocos2d'),
// Import the geometry module
geo = require('geometry');

// Create a new layer
var Cocos2d-javascript = cocos.nodes.Layer.extend({
init: function() {
// You must always call the super class version of init
Cocos2d-javascript.superclass.init.call(this);

// Get size of canvas
var s = cocos.Director.get('sharedDirector').get('winSize');

// Create label
var label = cocos.nodes.Label.create({string: 'Cocos2d Javascript', fontName: 'Arial', fontSize: 76});

// Add label to layer
this.addChild({child: label, z:1});

// Position the label in the centre of the view
label.set('position', geo.ccp(s.width / 2, s.height / 2));
}
});

exports.main = function() {
// Initialise application

// Get director
var director = cocos.Director.get('sharedDirector');

// Attach director to our <div> element
director.attachInView(document.getElementById('cocos2d_javascript_app'));

// Create a scene
var scene = cocos.nodes.Scene.create();

// Add our layer to the scene
scene.addChild({child: Cocos2d-javascript.create()});

// Run the scene
director.runWithScene(scene);
};

注意看第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