◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆
◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
◆ 最初から読みたい場合はココをクリックして下さい。◆
こちらの記事の続きです。
今回は、タイルマップでステージを作成します。
タイルマップとは、タイルセット(マップチップ)と呼ばれる色々なパターンのタイルを並べて、ゲームのステージやマップを作成したものです。1つタイルセットで様々なステージが作成出来ます。
【 注意 】この記事で使用しているCocos Creator v2.3.3は、VS Codeのデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。
目次
使用環境
私が使用している環境です。
- OS:Windows 10 Home
- ブラウザ:Google Chrome (64-bit)
- 開発環境:Cocos Creator v2.3.3
- コードエディタ:Visual Studio Code(以下VS Code)
- Tiled Version 1.3.4
Tiledをインストールする
Tiledをダウンロードしてインストールします。
- 下記のサイトを開きます。
Tiled Map Editor by Thorbjørn
- 『Download Now』をクリックします。
寄付を募る画面が出ます。
- ダウンロードだけする場合は、『No thanks, just take me to the downloads』をクリックします。
- 『Download』をクリックします。
『Tiled-1.3.4-win64.msi』がダウンロードされます。
- 『Tiled-1.3.4-win64.msi』をダブルクリックして実行します。
- 『詳細情報』をクリックします。
- 『実行』をクリックします。
- 『Next』をクリックします。
- 『I accept the terms in the License Agreement』にチェックを入れて、『Next』をクリックします。
- インストール先を指定して、『Next』をクリックします。
- 『Install』をクリックします。
- 『このアプリがデバイスに変更を加えることを許可しますか?』と表示されたら、『はい』をクリックします。
- 『Finish』をクリックします。
ブラウザで作業
以上で、インストール完了です。
タイルセットの画像をAssetsに追加する
タイルマップを描く
タイルセットの画像を並べてステージを作成します。
- 『ファイル』→『新規』→『新しいタイルセット』をクリックします。
- 下図のように設定して、『ファイル名をつけて保存』をクリックします。
- 『参照』をクリックして、Assetsに追加した『spritesheet_ground.png』を選択します。
- 『タイルの幅』を"128px"にします。
- 『タイルの高さ』を"128px"にします。
- 『参照』をクリックして、Assetsに追加した『spritesheet_ground.png』を選択します。
- 『assets/texture』フォルダにファイル名はそのままで『保存』をクリックします。
- 『ファイル』→『新規』→『新しいマップ』をクリックします。
- 下図のように設定して、『ファイル名をつけて保存』をクリックします。
- マップの大きさの『幅』を"200タイル"にします。
- マップの大きさの『高さ』を"20タイル"にします。
- タイルの大きさの『幅』を"128px"にします。
- タイルの大きさの『高さ』を"128px"にします。
- マップの大きさの『幅』を"200タイル"にします。
- 『assets/texture』フォルダに”stage01.tmx”と名前を付けて『保存』をクリックします。
Cocos Creatorのプロジェクトフォルダの『assets/texture』です。
- 『レイヤー』パネルで、レイヤー名をダブクリックして”tile”に変更します。
問題ないかもしれませんが日本語を避けました。
- 『タイルセット』パネルで、タイルを選んでからマウスのドラッグで下図のように描きます。
Tiledで作業
タイルマップにオブジェクトを配置する
Cocos Creatorでタイルマップを読み込む時に、オブジェクトの形状と位置の情報を元にコライダーを作成します。
- 『レイヤー』パネルで、『新しいレイヤー』ボタン→『Object Layer』をクリックします。
- 作成したレイヤーの名前を”platform”に変更します。
- 『四角形を追加』ボタンをクリックして、『ctrl』キーを押しながらマウスでドラッグして下図のようにオブジェクトを作成します。
オブジェクトを配置するにはオブジェクトレイヤーが選択されている必要があります。
『ctrl』キーを押すと、マウスカーソルがグリッドに吸着します。
- 続けて下図のようにオブジェクトを配置します。
Tiledで作業
シーンにタイルマップを追加する
タイルマップのオブジェクトからコライダーを作る
タイルマップで配置したオブジェクトの形状と位置の情報を元にコライダーを作成します。
- 『Assets』パネルで『script』フォルダを右クリック→『Create』→『Typescript』をクリックします。
- 作成されたファイルの名前を"stage"に変更します。
- 『Node Tree』パネルで『Canvas/stage01』を選択して、『Properties』パネルで『Add Component』→『Custom Component』→『stage』をクリックして追加します。
- 『Assets』パネルで『assets/script/stage』をダブルクリックします。
VS Codeが起動します。VS Codeで作業
- 下記のようにコードを変更します。
const {ccclass, property} = cc._decorator; @ccclass export default class Stage extends cc.Component { // クラス名をNewClassからStageにする tiledMap: cc.TiledMap = null; // タイルマップ tiledMapSize: cc.Size = null; // タイルマップのサイズ start () { this.tiledMap = this.getComponent(cc.TiledMap); // stageノードの『TiledMap』コンポーネントを取得 this.tiledMapSize = cc.size( // タイルマップのサイズを計算 this.tiledMap.getTileSize().width * this.tiledMap.getMapSize().width, // タイルの幅 × x方向のタイルの枚数 this.tiledMap.getTileSize().height * this.tiledMap.getMapSize().height); // タイルの高さ × y方向のタイルの枚数 this.addPhisicsNode(); // コライダーを設置する } addPhisicsNode () { // 『Tiled』のオブジェクト情報を元にコライダーを配置 let objects: any[] = this.tiledMap.getObjectGroup("platform").getObjects(); // 『Tiled』のplatformレイヤーのオブジェクトを取得 let layerNode: cc.Node = this.tiledMap.node.getChildByName("platform"); // platformノードを取得 let physicsNode: cc.Node = new cc.Node(); // コライダーを配置するノードを作成 physicsNode.name = "platformCollider"; // ノード名を変更する let rigidBody: cc.RigidBody = physicsNode.addComponent(cc.RigidBody); // ノードにRigidBody(剛体)コンポーネントを追加 rigidBody.type = cc.RigidBodyType.Static; // 剛体のタイプをスタティック(静的)にする for (let i = 0; i < objects.length; i ++) { // オブジェクトの数だけループ let curObject = objects[i]; // オブジェクトを取得 let pos = cc.v2( // オブジェクトの位置をCocos Creatorの座標(中心が原点)に変換 curObject.offset.x + curObject.width / 2 - this.tiledMapSize.width / 2, // マップの幅/2オフセット this.tiledMapSize.height / 2 - curObject.offset.y - curObject.height / 2); // マップの高さ/2オフセットし、正負逆転 switch (curObject.type) { // タイプ別に処理をする case 0: // ボックス, ポイント let boxCollider: cc.PhysicsBoxCollider = physicsNode.addComponent(cc.PhysicsBoxCollider); // 物理ノードにボックスコライダーを追加して取得 boxCollider.name = curObject.name; // 名前を取得 boxCollider.density = 0; // 密度 boxCollider.friction = 0; // 摩擦係数 boxCollider.restitution = 0; // 反発係数 boxCollider.size = cc.size(curObject.width, curObject.height); // ボックスのサイズ boxCollider.offset = pos; // ボックスの中心位置 break; case 1: // サークル let circleCollider: cc.PhysicsCircleCollider = physicsNode.addComponent(cc.PhysicsCircleCollider); // 物理ノードにサークルコライダーを追加して取得 circleCollider.name = curObject.name; // 名前を取得 circleCollider.density = 0; // 密度 circleCollider.friction = 0; // 摩擦係数 circleCollider.restitution = 0; // 反発係数 circleCollider.radius = curObject.width / 2; // 円の半径 circleCollider.offset = pos; // 円の中心位置 break; case 2: // ポリゴン let polygonCollider:cc.PhysicsPolygonCollider = physicsNode.addComponent(cc.PhysicsPolygonCollider); // 物理ノードにポリゴンコライダーを追加して取得 polygonCollider.name = curObject.name; // 名前を取得 polygonCollider.density = 0; // 密度 polygonCollider.friction = 0; // 摩擦係数 polygonCollider.restitution = 0; // 反発係数 for (let j = 0; j < curObject.points.length; j ++) { // ポリゴンの頂点の数だけループ polygonCollider.points[j] = cc.v2(curObject.points[j]); // ポリゴンコライダーに頂点をコピー } if (curObject.points.length == 3) { // 三角形の場合 polygonCollider.points[curObject.points.length] = polygonCollider.points[0]; // 最後に始点を入れてポリゴンを閉じる } polygonCollider.offset = pos; // ポリゴンの始点 break; } } layerNode.addChild(physicsNode); // 物理ノードをstaticノードの子ノードとして追加 } }
- 『ctrl + s』キーを押して、コードを保存します。
Cocos Creatorで作業
- 『ctrl + p』キー(またはプレビューボタン)を押して、プレビューを実行します。
ゲーム画面を一度クリックした後、プレイヤーをキー操作で移動出来ます。
【 注意 】クリックでゲーム画面をフォーカスしていないとキー操作出来ません。
*下図はgifです。クリックで再生します。(ブログの仕様でgifがループします。)
*キーボードとマウスの操作を表示するソフトを使っています。
Cocos Creatorで作業
今回作成したファイル
今回の作業によって下記のファイルのようになります。
今回はここまでです。お疲れさまでした。
続きは、こちらの記事です。