Cocos2d-xはv3.7からCocos2d-JSと統合されたため、このブログでは『Cocos2d-x v3.7（JavaScript）』と書いているのですが、調べ物をすると『Cocos2d-JS』表記の情報が多い状況です。
『Cocos2d-x』公式サイトで『Cocos2d-JS』のチュートリアルを見つけたのですが、『Cocos2d-x v3.7（JavaScript）』のチュートリアルにもなりそうです。
まだ使ったことがないタイルマップや音声ファイルの再生が含まれていたのでやってみることにしました。
チュートリアルには画像や音のデータが含まれているのでありがたいですね。
ただし、そのままやるのではなく『Cocos Studio 2』を活用してやってみたいと思います。
公式サイトのチュートリアルは下記のリンクから見ることが出来ます。
http://cocos2d-x.org/docs/tutorial/framework/html5/en
今回はタイルマップを作成するエディタをインストールし、実際にタイルマップを作成するところまで作業を行います。
目次
開発環境
変更していないのですが、最近表記していないので書いておきます。
- Mac OS X Yosemite Version 10.10.5
- Cocos Version 2.3.1.1
- Cocos Studio 2 Version 2.3.1.1
- Cocos Code IDE Version 1.2.0
- Cocos Framework Version 3.7
- ブラウザ：Google Chrome Version 45.0.2454.85 (64-bit)
- Xcode Version 7.1
チュートリアルの内容
作成するのは、シンプルなアクションゲームです。
ランナーをタイミングよくジャンプさせてコインを獲得しながら進みます。岩にぶつかるとゲームオーバーです。
ランナーの動作やコイン・岩との接触の判定には物理演算エンジンの『Chipmunk』を利用しています。
画像・音声データの取得
公式サイトのチュートリアルでは作業を段階的に進めていて、段階ごとのデータを配布しています。
ここでは最終段階のデータを利用します。
http://cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter10/en
タイルマップの作成
タイルマップとは
タイルマップは、数パターンの小さなタイル状の画像を敷き詰めて、ゲームの背景等の大きな一枚絵を作成するものです。メモリを節約するのに役立ちます。
タイルマップエディタ
タイルマップは、無料のエディタを使用して作成します。『Tiled』という名称のソフトです。
ファイル形式が『Cocos2d-x』でサポートされています。
『Tiled』のダウンロード
『Cocos Store』からダウンロードできます。
- 『Cocos』を起動
- 左サイドメニューの『Cocos Store』をクリック
- 画面右上の『Searching』に『Tiled』と入力し、Enterキーを押下して検索
- 検索結果の『Tiled』のアイコンの下の『download』をクリック
『Tiled』のインストール
- 『Cocos』の左サイドメニューの『Downloads』をクリック
- 上部の『Downloaded』をクリック
- 『Tiled』のアイコンの横の『Install』をクリック
『tiled-0.11.0.dmg』がマウントされます。
- 開いたウインドウで『Tiled』のアイコンを『Applications』フォルダにドラッグアンドドロップ
タイルマップの作成
タイルマップでゲームのステージを2パターン作成します。背景を作成し、コインと岩の位置情報として利用するオブジェクトを配置します。
2パターンのマップは、それぞれ『マップ00』と『マップ01』と呼ぶことにします。
マップ00の作成
- チュートリアルのデータの『Parkour/res』フォルダ内の『map.png』を作業するフォルダにコピー
- 『Applications』フォルダの『Tiled』をクリックして起動
- 画面上部の『新しいファイル』のアイコンをクリック
- 開いたウインドウで下記の設定を行い、『OK』をクリック
- 画面右中央の『タイルセット』ウインドウの『タイルセット』タブの『新しいタイルセット』アイコンをクリック
- 開いたウインドウで下記の設定を行い、『OK』をクリック
- 『参照』をクリックし、先ほど作業するフォルダにコピーした『map.png』を選択
- 『参照』をクリックし、先ほど作業するフォルダにコピーした『map.png』を選択
- 画面右上の『レイヤー』ウインドウの『タイル・レイヤー1』の文字の上をダブルクリックし、レイヤー名を『background』に変更
- 『タイルセット』ウインドウで塗りたいタイルを選択し、左のウインドウでドラッグして図のようにグリッドを塗る
図のようにタイルセットを範囲選択して塗ることも可能です。 - 『レイヤー』ウインドウの『新しいレイヤー』アイコンをクリックし、『タイル・レイヤーの追加』をクリック
- レイヤーの名前を『grass』にする
- 『タイルセット』ウインドウで草のタイルを選択し、図のようにグリッドを塗る
- 『レイヤー』ウインドウの『新しいレイヤー』アイコンをクリックし、『オブジェクト・レイヤーの追加』をクリック
- レイヤーの名前を『coin』にする
- 画面上部の『四角形を追加』アイコンをクリックし、図のようにオブジェクトを配置
- 削除する場合は、対象のオブジェクトを右クリックし、『１つのオブジェクトを削除』をクリック
- 座標を手入力する場合は、オブジェクトを右クリックし、『オブジェクトのプロパティ...』をクリックした後、画面右下の『プロパティ』ウインドウで対象の項目に入力
- 『レイヤー』ウインドウの『新しいレイヤー』アイコンをクリックし、『オブジェクト・レイヤーの追加』をクリック
- レイヤーの名前を『rock』にする
- 『四角形を追加』アイコンをクリックし、図のようにオブジェクトを配置
- 画面上部の『保存』アイコンをクリックし、作業フォルダに『map00』という名前を付けて保存
マップ01の作成
作成の手順は『マップ00』と同様です。下図の様に作成して下さい。
今回は以上です。
あとがき
後々の作業でハマったのですが、チュートリアルのデータに含まれているタイルマップの『タイルの出力形式』は『Base64(zlib圧縮)』形式だったのですが、この形式は『Cocos Code IDE』でのデバッグ実行やブラウザ実行では動作できたものの『Xcode』の『iOS Simurator』ではうまく動作しませんでした。
『CSV』形式は『Cocos Studio 2』が対応していないらしく、読み込めませんでした。
『XML』形式にすると『iOS Simurator』も動いたのですが、その後再度試すとなぜか『Base64(zlib圧縮)』形式でも動くようになりました。
『Clean Build』しても変わらず、『iOS Simurator』の中のアプリを消してもかわらず、、、ということで、残り２つの形式はわからないままです。
詳細は不明になってしまいましたが、『iOS』でうまく実行出来ない場合は、『タイルの出力形式』もチェックが必要ですね。
