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 init10         Cocos2d-javascript.superclass.init.call(this);11 12         // Get size of canvas13         var s = cocos.Director.get('sharedDirector').get('winSize');14 15         // Create label16         var label = cocos.nodes.Label.create({string: 'Cocos2d Javascript', fontName: 'Arial', fontSize: 76});17 18         // Add label to layer19         this.addChild({child: label, z:1});20 21         // Position the label in the centre of the view22         label.set('position', geo.ccp(s.width / 2, s.height / 2));23     }24 });25 26 exports.main = function() {27     // Initialise application28 29     // Get director30     var director = cocos.Director.get('sharedDirector');31 32     // Attach director to our <div> element33     director.attachInView(document.getElementById('cocos2d_javascript_app'));34 35     // Create a scene36     var scene = cocos.nodes.Scene.create();37 38     // Add our layer to the scene39     scene.addChild({child: Cocos2d-javascript.create()});40 41     // Run the scene42     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