モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

物理エンジンを使ったシンプルなゲームを作る! その1(タイルマップでステージ作成):Cocos Creator

<今回やること!>

  • 物理エンジンを使ったシンプルなアクションゲームを作成します。
    • ゲームに必要な絵、音、フォント等のリソースを入手します。
    • タイルマップエディタの『Tiled』を使用して、ステージを作成します。
    • ゲームシーンを作成し、サイズをタイルマップのステージに合わせます。
    • シミュレーターのサイズをタイルマップのステージに合わせます。
 
 作成するのは、自動で走り続けるプレイヤーをジャンプさせて、障害物を避けつつコインを集めるゲームです。操作は、スペースキーによるジャンプだけです。
    f:id:mmorley:20190531092459g:plain
 シンプルなゲームですが、アクションゲームに必要な様々な要素が含まれています。
  • タイルマップによるステージの作成とコインや障害物の配置
  • プレイヤーが走ったり、ジャンプしたりするフレームアニメーションの作成
  • 物理エンジンを使ったプレイヤの動きや、コイン・障害物との衝突判定
  • プレイヤーの表示位置を固定するカメラの設定
  • BGM、効果音の設定
  • ベストスコアの保存
  • スタート、リスタートボタンの設定
    などなど
 
 それでは作成開始です!

使用環境

 私が使用している環境です。

アセットの入手

 ゲームに必要なアセット(画像・音等の素材)を入手します

  1. 下記のサイトを開く
    blog-files/Parkour_Assets.zip at master · githubmorley/blog-files · GitHub
  2. 『Download』をクリック
    Parkour_Assets.zip』がダウンロードされます。
  3. Parkour_Assets.zip』をダブルクリックして解凍

『Cocos Creator』の新規プロジェクトを作成

  1. 『Cocos Creator』の『Dashboard』の『New Project』タブで、『Empty Project』を選択し、任意のプロジェクト名(例:"Parkour")を付けて『Create』をクリック
    f:id:mmorley:20190531160929p:plain

デバッグ構成ファイル等を追加

  1. 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Update VS Code API Source』をクリック
    f:id:mmorley:20190516094117p:plain:w500
  2. 『Cocos Creator』のエディタのメニューで『Cocos Creator』→『Developer』→『VS Code Workflow』→『install VS Code Extension』をクリック
    f:id:mmorley:20190516093649p:plain:w500
  3. 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Type Script Config』をクリック
    f:id:mmorley:20190516145223p:plain:w500
  4. 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Chrome Debug Setting』をクリック
    f:id:mmorley:20190516144458p:plain:w500
  5. 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Compile Task』をクリック
    f:id:mmorley:20190516144827p:plain:w500

アセットを追加

  1. 『Cocos Creator』のエディターの『Assets』パネルの『assets』に、ダウンロード→解凍した『Parkour_Assets』の5つのサブフォルダをドラッグして追加
    f:id:mmorley:20190531174736p:plain

タイルマップでステージを作成

 1つのタイルセットで、タイルマップを2つ作成します。
 『Tiled』の入手方法・使い方については、下記の記事をご参考下さい。

『map00.tmx』を作成

  1. 『Tiled』で、『ファイル』→『新規』→『新しいマップ...』ボタンをクリック
  2. 下図のように設定して、『ファイル名を付けて保存...』をクリック
    f:id:mmorley:20190531223417p:plain:w400
  3. 下記の設定をして『Save』をクリック
    • 保存場所:『Cocos Creator』のプロジェクトフォルダの『/assets/TileMap』
    • ファイル名:"map00"
    f:id:mmorley:20190531231657p:plain:w500
  4. 『ファイル』→『新規』→『新しいタイルセット...』ボタンをクリック
  5. 『参照』をクリックし、『Cocos Creator』のプロジェクトフォルダの『/assets/TileMap/map.png』を選択し、『ファイル名をつけて保存...』をクリック
    f:id:mmorley:20190601174205p:plain
  6. 『Save』をクリック
  7. 『map00.tmx』タブに切り替える
  8. 初期の『Tile Layer』の名前を"background"に変更し、下図のように塗る
    f:id:mmorley:20190601193951p:plain:w500
  9. 『Tile Layer』を新規作成して名前を"grass"に変更し、下図のように塗る
    f:id:mmorley:20190601194213p:plain:w500
  10. 『Object Layer』を新規作成して名前を"static"に変更し、下図のように『四角形』のオブジェクトを追加
    f:id:mmorley:20190601200539p:plain:w500
  11. 『Object Layer』を新規作成して名前を"coin"に変更し、下図のように『Point』のオブジェクトを追加
    f:id:mmorley:20190601202933p:plain:w500
  12. 『Object Layer』を新規作成して名前を"rock"に変更し、下図のように『Point』のオブジェクトを追加
    f:id:mmorley:20190601203219p:plain:w500
  13. 『ファイル』→『保存』をクリック

『map01.tmx』を作成

  1. 『Tiled』で、『ファイル』→『新規』→『新しいマップ...』ボタンをクリック
  2. 下図のように設定して、『ファイル名を付けて保存...』をクリック
    f:id:mmorley:20190531223417p:plain:w400
  3. 下記の設定をして『Save』をクリック
    • 保存場所:『Cocos Creator』のプロジェクトフォルダの『/assets/TileMap』
    • ファイル名:"map01"
  4. 初期の『Tile Layer』の名前を"background"に変更し、下図のように塗る
    f:id:mmorley:20190601193951p:plain:w500
  5. 『Tile Layer』を新規作成して名前を"grass"に変更し、下図のように塗る
    f:id:mmorley:20190601194213p:plain:w500
  6. 『Object Layer』を新規作成して名前を"static"に変更し、下図のように『四角形』のオブジェクトを追加
    f:id:mmorley:20190601200539p:plain:w500
  7. 『Object Layer』を新規作成して名前を"coin"に変更し、下図のように『Point』のオブジェクトを追加
    f:id:mmorley:20190601205421p:plain:w500
  8. 『Object Layer』を新規作成して名前を"rock"に変更し、下図のように『Point』のオブジェクトを追加
    f:id:mmorley:20190601205536p:plain:w500
  9. 『ファイル』→『保存』をクリック

ゲームシーンを作成

 タイルマップで作成したステージのサイズは『W640✕H320ピクセル』です。『W32✕H32ピクセル』のタイルを『W20✕H10枚』並べています。
 シーンのサイズをこれに合わせます。

  1. 『Cocos Creator』で、『Assets』パネルの『assets』の直下に『Folder』を追加し、名前を"Scene"にする
  2. 『Scene』フォルダに『Scene』を追加し、名前を"Game"にする
    f:id:mmorley:20190602124431p:plain
  3. 『Game』シーンをダブルクリックして開く
  4. 『Node Tree』パネルで、『Canvas』をクリックし、『Properties』パネルで、『Design Resolution』を下図のように設定
    f:id:mmorley:20190602161857p:plain

シミュレーターの解像度を設定

 『Simulator』でプレビューする際の解像度の設定です。
 ブラウザでしかプレビューしない場合、この設定は不要です。

  1. 『Cocos Creator』のメニューの『Project』→『Project Settings...』をクリック
    f:id:mmorley:20190602162419p:plain
  2. 『Project Preview』を下図のように設定し、『Save』をクリック
    f:id:mmorley:20190602162831p:plain:w500
 
 また途中ですが、今回はここまでです。
 続きはこちらの記事です。

あとがき

 今回作成したゲームは『Cocos Creator』が提供される以前からある『cocos2d-x』のデモ(チュートリアル)です。
 今回改めて『Cocos Creator』作成してみて、開発環境の進化を感じました。ビジュアルエディタ側で出来ることが増え、コーディング量も少なくなりました。