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

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

公式サイトのチュートリアルをやってみる その1 - タイルマップの作成:Cocos2d-x v3.7(JavaScript)

 f:id:mmorley:20151028155541p:plain
 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

  1. 上記のリンクをクリック
  2. ページの最下部の『Summary』の段落の『In the tutorial, 〜』の最後の『here』を右クリック
  3. 『リンク先を別名で保存』で『Parkour.zip』を任意の場所に保存します。
  4. Parkour.zip』をダブルクリックして解凍
    Parkour』フォルダが作成されます。

タイルマップの作成

タイルマップとは

 タイルマップは、数パターンの小さなタイル状の画像を敷き詰めて、ゲームの背景等の大きな一枚絵を作成するものです。メモリを節約するのに役立ちます。

タイルマップエディタ

 タイルマップは、無料のエディタを使用して作成します。『Tiled』という名称のソフトです。
 ファイル形式が『Cocos2d-x』でサポートされています。

『Tiled』のダウンロード

 『Cocos Store』からダウンロードできます。

  1. 『Cocos』を起動
  2. 左サイドメニューの『Cocos Store』をクリック
  3. 画面右上の『Searching』に『Tiled』と入力し、Enterキーを押下して検索
  4. 検索結果の『Tiled』のアイコンの下の『download』をクリック

f:id:mmorley:20151027214711p:plain

『Tiled』のインストール
  1. 『Cocos』の左サイドメニューの『Downloads』をクリック
  2. 上部の『Downloaded』をクリック
  3. 『Tiled』のアイコンの横の『Install』をクリック
    『tiled-0.11.0.dmg』がマウントされます。
    f:id:mmorley:20151028154455p:plain
  4. 開いたウインドウで『Tiled』のアイコンを『Applications』フォルダにドラッグアンドドロップ

タイルマップの作成

 タイルマップでゲームのステージを2パターン作成します。背景を作成し、コインと岩の位置情報として利用するオブジェクトを配置します。
 2パターンのマップは、それぞれ『マップ00』と『マップ01』と呼ぶことにします。

マップ00の作成
  1. チュートリアルのデータの『Parkour/res』フォルダ内の『map.png』を作業するフォルダにコピー
  2. 『Applications』フォルダの『Tiled』をクリックして起動
  3. 画面上部の『新しいファイル』のアイコンをクリック
  4. 開いたウインドウで下記の設定を行い、『OK』をクリック
    • 『タイルの出力形式』:『XML
      Base64(zlib圧縮)』は『iOS』が未対応でした。
      CSV』は『Cocos Studio 2』が未対応でした。
      f:id:mmorley:20151027225812p:plain
  5. 画面右中央の『タイルセット』ウインドウの『タイルセット』タブの『新しいタイルセット』アイコンをクリック
  6. 開いたウインドウで下記の設定を行い、『OK』をクリック
    • 『参照』をクリックし、先ほど作業するフォルダにコピーした『map.png』を選択
      f:id:mmorley:20151027234911p:plain
  7. 画面右上の『レイヤー』ウインドウの『タイル・レイヤー1』の文字の上をダブルクリックし、レイヤー名を『background』に変更
  8. 『タイルセット』ウインドウで塗りたいタイルを選択し、左のウインドウでドラッグして図のようにグリッドを塗る
    f:id:mmorley:20151028085356p:plain
    図のようにタイルセットを範囲選択して塗ることも可能です。
  9. 『レイヤー』ウインドウの『新しいレイヤー』アイコンをクリックし、『タイル・レイヤーの追加』をクリック
  10. レイヤーの名前を『grass』にする
  11. 『タイルセット』ウインドウで草のタイルを選択し、図のようにグリッドを塗る
    f:id:mmorley:20151028093340p:plain
  12. 『レイヤー』ウインドウの『新しいレイヤー』アイコンをクリックし、『オブジェクト・レイヤーの追加』をクリック
  13. レイヤーの名前を『coin』にする
  14. 画面上部の『四角形を追加』アイコンをクリックし、図のようにオブジェクトを配置
    f:id:mmorley:20151028103322p:plain
    • 削除する場合は、対象のオブジェクトを右クリックし、『1つのオブジェクトを削除』をクリック
    • 座標を手入力する場合は、オブジェクトを右クリックし、『オブジェクトのプロパティ...』をクリックした後、画面右下の『プロパティ』ウインドウで対象の項目に入力
  15. 『レイヤー』ウインドウの『新しいレイヤー』アイコンをクリックし、『オブジェクト・レイヤーの追加』をクリック
  16. レイヤーの名前を『rock』にする
  17. 『四角形を追加』アイコンをクリックし、図のようにオブジェクトを配置
    f:id:mmorley:20151028112008p:plain
  18. 画面上部の『保存』アイコンをクリックし、作業フォルダに『map00』という名前を付けて保存
    f:id:mmorley:20151028114708p:plain
マップ01の作成

 作成の手順は『マップ00』と同様です。下図の様に作成して下さい。
f:id:mmorley:20151028164411p:plain
 
 今回は以上です。

あとがき

 後々の作業でハマったのですが、チュートリアルのデータに含まれているタイルマップの『タイルの出力形式』は『Base64(zlib圧縮)』形式だったのですが、この形式は『Cocos Code IDE』でのデバッグ実行やブラウザ実行では動作できたものの『Xcode』の『iOS Simurator』ではうまく動作しませんでした。
 『CSV』形式は『Cocos Studio 2』が対応していないらしく、読み込めませんでした。
 『XML』形式にすると『iOS Simurator』も動いたのですが、その後再度試すとなぜか『Base64(zlib圧縮)』形式でも動くようになりました。
 『Clean Build』しても変わらず、『iOS Simurator』の中のアプリを消してもかわらず、、、ということで、残り2つの形式はわからないままです。
 詳細は不明になってしまいましたが、『iOS』でうまく実行出来ない場合は、『タイルの出力形式』もチェックが必要ですね。