読者です 読者をやめる 読者になる 読者になる

Cocos2d-JSの最小テンプレートを作成する

少し前からCocos2d-JS(JavaScript版Cocos2d-x)がクリエイティブコーディング環境として使えないか検討を続けていたのですが、大方の機能が把握でき、そろそろ行けそうな気がしてきました。

本日はその第1弾として、ブラウザ上でCocos2d-JSを使うための最小のテンプレートを作成してみたいと思います。

Cocos2d-JSをダウンロードする

まずは、HTML5版のCocos2d-xを公式サイトのダウンロードページから取得します。

f:id:tkitao:20160213004001p:plain

今回はデバッグ可能な形で全機能を利用したいので、Full VersionUncompressedを選択して、Downloadボタンを押します。

ファイルを配置する

次にダウンロードしたファイルを以下のような構成で配置します。

f:id:tkitao:20160213010041p:plain

  • libフォルダ:ダウンロードしたCocos2d-JS本体や拡張ライブラリを配置
  • resフォルダ:画像やサウンドなどのリソースファイルを配置
  • srcフォルダ:JavaScriptファイルを配置

index.htmlは後ほど作成します。

セットアップの簡略化

Cocos2d-JSは慣習的に、ページのベースとなるindex.html、フレームレート等プロジェクトの基本設定を記述するproject.json、リソースの読み込みと最初のシーンを起動するmain.jsの3つのファイルを作成します。

今回は出来るだけ気軽に開発を始められるようにしたいので、以下の方法でindex.htmlにすべての設定を集約させることにします。

  • project.jsonは使用せず、グローバル変数ccConfigで直接設定する
  • main.jsのコードはindex.htmlに埋め込む
  • 各種スタイル設定もindex.htmlstyleタグで直接指定する

Cocos2d-JSテンプレート

すべての設定を集約したindex.htmlがこちらになります。

gist.github.com

該当コメントの箇所を修正することで、JavaScriptファイル、画面サイズ、事前に読み込むリソースファイル、最初に起動するシーンをそれぞれ追加・変更できます。

開発補助ツールの導入

これでCocos2d-JSのアプリ開発の準備が整いました。(この日のために準備してきた拙作の)以下のツールを導入するとアプリ開発が一層楽になります。

次回はこの環境でクリエイティブコーディングをしてみます。