Lite版とはスマホアプリ用ゲームの開発によく使われるCocos2d-x。これをJavaScriptで書けるようにしたのがCocos2d-JS(Cocos2d-HTML5)。そこから更にWebアプリに特化したのがLite版。BuildとかMonacaとか使えば普通にLite版でもスマホアプリが作れてしまう(正確にはハイブリッドアプリだけど)。liteはCocos2dエンジンである、ひとつのJavaScriptファイルを読み込むだけなのでとてもシンプル構造だ。シンプル過ぎて拡張しにくい。HTMLファイルにコード直書きだし、シーンにそのまま画像やら文字列やら表示させてるし...。自分なりの使い方を解説してみる。Versionのダウンロードする。Lite版にはFullバージョンとliteバージョンがありますが、今回はliteバージョンのversion3.3です。ダウンロードできたらZIPファイルを展開しておく。フォルダを開いて「HelloWorld.html」をダブルクリックすると、次の画面が表示される。ファイル構造を変更する「HelloWorld.html」のファイル名を「index.html」に変更する。resフォルダを作り、「HelloWorld.png」をresフォルダ内に移動する。srcフォルダを作り、新しく「resource.js」というファイルを作る。「resource.js」の中身は次のように書く。g_resources.push(res[i]);}引き続き、srcフォルダの中に新しく「myScene.js」というファイルを作る。「myScene.js」の中身は次のように書く。レイヤーを作り、シーンがレイヤーを読み込むようにした。}});「index.html」の中身を次のように修正する。</script></body></html>「index.html」ファイルをダブルクリックして起動してみる。エラーなく最初の通りに表示されれば完成!面倒なのでローカルサーバーは使ってない。cc.logが表示されないのはローカルサーバーを使っていないから。ローカルサーバーを使わないので「project.json」ファイルも使わない。リソースを追加して画像を表示する今回、この画像ファイル(cocos.png)を追加してみる。「cocos.png」をresフォルダに入れる。「resource.js」を次のように修正する。}});「index.html」ファイルをダブルクリックして起動してみる。シーンを追加して画面を遷移するsrcフォルダ内に新しく「nextScene.js」ファイルを作る。「nextScene.js」を次のように修正する。}});「index.html」に次の行を追加する。charset="UTF-8"></script>「myScene.js」を次のように修正する。タップイベントリスナーを登録している。}});「index.html」ファイルをダブルクリックして起動してみる。画面サイズを調整するlite版は標準では画面サイズが大きくてはみ出てしまうので変更する必要がある。「index.html」ファイルを次のように修正する。</script></body></html>アプリ化して実機で確認するとキチンと表示されている。横向きにしても問題なしだ。Cocos2d-JS(HTML5)でゲームを作るそんなわけでLite版でスマホアプリ向けゲームを作ってみた。アハ体験みたいなゲームでとてもシンプルだけど、アニメーションやら何やらよく使うであろうコードが書かれているはず。Let'sアハ体験はこちらからどうぞ。ゲームのロジックが分かったら、GitHubにソース一式をまるごと置いておいたのでコードを読んでみると参考になるかも。Buildを使ってアプリ化する方法を参考にして是非Cocos2d-html5でアプリを作ってみて欲しい。河合@kawai_norimitsu小さな会社やってます。upLoginユーザーは見つかりませんでした。