<今回やること!>
- 物理エンジンを使ったシンプルなアクションゲームを作成します。
- ゲームに必要な絵、音、フォント等のリソースを入手します。
- タイルマップエディタの『Tiled』を使用して、ステージを作成します。
- ゲームシーンを作成し、サイズをタイルマップのステージに合わせます。
- シミュレーターのサイズをタイルマップのステージに合わせます。
- ゲームに必要な絵、音、フォント等のリソースを入手します。
作成するのは、自動で走り続けるプレイヤーをジャンプさせて、障害物を避けつつコインを集めるゲームです。操作は、スペースキーによるジャンプだけです。
- タイルマップによるステージの作成とコインや障害物の配置
- プレイヤーが走ったり、ジャンプしたりするフレームアニメーションの作成
- 物理エンジンを使ったプレイヤの動きや、コイン・障害物との衝突判定
- プレイヤーの表示位置を固定するカメラの設定
- BGM、効果音の設定
- ベストスコアの保存
- スタート、リスタートボタンの設定
などなど
それでは作成開始です!
目次
使用環境
私が使用している環境です。
- Mac OS X El Capitan Version 10.11.6
- Cocos Creator Version 2.1.1
- ブラウザ:Google Chrome Version 74.0.3729.169 (64-bit)
アセットの入手
ゲームに必要なアセット(画像・音等の素材)を入手します
- 下記のサイトを開く
blog-files/Parkour_Assets.zip at master · githubmorley/blog-files · GitHub
- 『Download』をクリック
『Parkour_Assets.zip』がダウンロードされます。
- 『Parkour_Assets.zip』をダブルクリックして解凍
『Cocos Creator』の新規プロジェクトを作成
デバッグ構成ファイル等を追加
- 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Update VS Code API Source』をクリック
- 『Cocos Creator』のエディタのメニューで『Cocos Creator』→『Developer』→『VS Code Workflow』→『install VS Code Extension』をクリック
- 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Type Script Config』をクリック
- 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Chrome Debug Setting』をクリック
- 『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Compile Task』をクリック
タイルマップでステージを作成
1つのタイルセットで、タイルマップを2つ作成します。
『Tiled』の入手方法・使い方については、下記の記事をご参考下さい。
『map00.tmx』を作成
- 『Tiled』で、『ファイル』→『新規』→『新しいマップ...』ボタンをクリック
- 下図のように設定して、『ファイル名を付けて保存...』をクリック
- 下記の設定をして『Save』をクリック
- 保存場所:『Cocos Creator』のプロジェクトフォルダの『/assets/TileMap』
- ファイル名:"map00"
- 保存場所:『Cocos Creator』のプロジェクトフォルダの『/assets/TileMap』
- 『ファイル』→『新規』→『新しいタイルセット...』ボタンをクリック
- 『参照』をクリックし、『Cocos Creator』のプロジェクトフォルダの『/assets/TileMap/map.png』を選択し、『ファイル名をつけて保存...』をクリック
- 『Save』をクリック
- 『map00.tmx』タブに切り替える
- 初期の『Tile Layer』の名前を"background"に変更し、下図のように塗る
- 『Tile Layer』を新規作成して名前を"grass"に変更し、下図のように塗る
- 『Object Layer』を新規作成して名前を"static"に変更し、下図のように『四角形』のオブジェクトを追加
- 『Object Layer』を新規作成して名前を"coin"に変更し、下図のように『Point』のオブジェクトを追加
- 『Object Layer』を新規作成して名前を"rock"に変更し、下図のように『Point』のオブジェクトを追加
- 『ファイル』→『保存』をクリック
『map01.tmx』を作成
- 『Tiled』で、『ファイル』→『新規』→『新しいマップ...』ボタンをクリック
- 下図のように設定して、『ファイル名を付けて保存...』をクリック
- 下記の設定をして『Save』をクリック
- 保存場所:『Cocos Creator』のプロジェクトフォルダの『/assets/TileMap』
- ファイル名:"map01"
- 保存場所:『Cocos Creator』のプロジェクトフォルダの『/assets/TileMap』
- 初期の『Tile Layer』の名前を"background"に変更し、下図のように塗る
- 『Tile Layer』を新規作成して名前を"grass"に変更し、下図のように塗る
- 『Object Layer』を新規作成して名前を"static"に変更し、下図のように『四角形』のオブジェクトを追加
- 『Object Layer』を新規作成して名前を"coin"に変更し、下図のように『Point』のオブジェクトを追加
- 『Object Layer』を新規作成して名前を"rock"に変更し、下図のように『Point』のオブジェクトを追加
- 『ファイル』→『保存』をクリック
ゲームシーンを作成
タイルマップで作成したステージのサイズは『W640✕H320ピクセル』です。『W32✕H32ピクセル』のタイルを『W20✕H10枚』並べています。
シーンのサイズをこれに合わせます。
シミュレーターの解像度を設定
『Simulator』でプレビューする際の解像度の設定です。
ブラウザでしかプレビューしない場合、この設定は不要です。
また途中ですが、今回はここまでです。
続きはこちらの記事です。