◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆
◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
◆ 最初から読みたい場合はココをクリックして下さい。◆
こちらの記事の続きです。
今回は、カメラワークを設定します。
カメラによって、シーンの中でゲーム画面に表示する範囲を設定しています。
プレイヤーが移動した時に、カメラがプレイヤーを追いかけるよう処理を追加します。
【 注意 】この記事で使用している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
カメラワークの処理を追加する
カメラの画角の中でプレイヤーが常に同じ位置になるようにカメラを移動します。
ステージの外を映さないように移動範囲を設定します。
現在は、playerノードもMain CameraノードもCanvasノードの直下にあるので、ワールド座標への変換は必要ないのですが、階層が変わっても良いような処理を行います。
下記のように実装します。
- プレイヤーのワールド座標を取得します。
playerノードとMain Cameraノードは親ノードが同じなのでワールド座標を使わなくても良いのですが、今回は、親ノードが異なる場合でも使えるコードにしています。
- プレイヤーの位置をカメラの画角の少し左寄りにします。
- ワールド座標をカメラの親ノード(Canvas)の座標に変換します。
基本的にノードの座標は、その親ノードに対する座標で指定します。
- 計算した座標が、カメラの移動範囲に収まるようにします。
- 『Assets』パネルで『script』フォルダを右クリック→『Create』→『Typescript』をクリックします。
- 作成されたファイルの名前を"camera"に変更します。
- 『Assets』パネルで『assets/script/camera』をダブルクリックします。
VS Codeが起動します。VS Codeで作業
- 下記のようにコードを変更します。
const {ccclass, property} = cc._decorator; @ccclass export default class Camera extends cc.Component { // クラス名をNewClassからCameraにする @property(cc.Node) // Cocos Creatorのエディタに表示する player: cc.Node = null; // プレイヤーのノード @property(cc.Node) // Cocos Creatorのエディタに表示する stage: cc.Node = null; // ステージのノード offset: cc.Vec3 = null; // カメラの中心からプレイヤーをずらす距離 boundLeft: number = 0; // カメラ座標の左端 boundRight: number = 0; // カメラ座標の右端 boundBottom: number = 0; // カメラ座標の下端 boundTop: number = 0; // カメラ座標の上端 start () { // 初めてupdate()が実行されるの前の処理 this.offset = cc.v3(cc.winSize.width, 0, 0).div(10); // プレイヤーをカメラの中心から画面幅の1/10ずらす // カメラ座標の範囲(画角の左下隅にカメラの原点があると考える) this.boundLeft = 0; // 左端 this.boundRight = this.stage.width * this.stage.scaleX - cc.winSize.width; // 右端(親ノード上でのステージの幅 - 画面の幅) this.boundBottom = 0; // 下端 this.boundTop = this.stage.height * this.stage.scaleY - cc.winSize.height; // 上端(親ノード上でのステージの高さ - 画面の高さ) } lateUpdate () { // 全てのコンポーネントのupdate()の後の処理 let cameraPos:cc.Vec3 = this.player.convertToWorldSpaceAR(cc.Vec3.ZERO); // プレイヤーのワールド座標を取得 cameraPos.addSelf(this.offset); // カメラの位置をプレイヤーからずらす cameraPos = this.node.parent.convertToNodeSpaceAR(cameraPos); // // ワールド座標を親ノード(Canvas)の座標に変換する // カメラ座標を範囲内にする cameraPos.x = Math.max(cameraPos.x, this.boundLeft); // 座標が左端より小さいなら左端にする cameraPos.x = Math.min(cameraPos.x, this.boundRight); // 座標が右端より大きいなら右端にする cameraPos.y = Math.max(cameraPos.y, this.boundBottom); // 座標が下端より小さいなら左端にする cameraPos.y = Math.min(cameraPos.y, this.boundTop);// 座標が上端より大きいなら上端にする this.node.position = cameraPos; // カメラの位置を更新する } }
- 『ctrl + s』キーを押して、コードを保存します。
Cocos Creatorで作業
- 『Node Tree』パネルで、『Main Camera』ノードを選択して、『Properties』パネルで『camera』スクリプトが見えるようにします。
- 『Node Tree』パネルから『Properties』パネルの『camera』に下記のようにノードをドラッグ&ドロップします。
- 『Node Tree』パネルの『player』→『Properties』パネルの『camera』の『player』
- 『Node Tree』パネルの『stage01』→『Properties』パネルの『camera』の『stage』
- 『Node Tree』パネルの『player』→『Properties』パネルの『camera』の『player』
Cocos Creatorで作業
ゲームの背景を設定する
ゲームの背景が真っ暗なので画像を表示します。
- Windowsのエクスプローラーで下記のフォルダ選択して、『Assets』パネルの『texture』にドラッグ&ドロップします。
- 『Assets』パネルから『blue_desert』を『Node Tree』パネルにドラッグ&ドロップします。
- 『Node Tree』パネルで『Canvas/blue_desert』を選択して、『Properties』パネルで『Node』と『Sprite』を下図のように設定します。
『Properties』パネルでノードの名前を変更出来ます。- ノードの名前を"ground"にします。
- 『Node』の『Position』をX:"-408"、Y:"-312"にします。
Canvasノードと左下隅の位置を合わせます。
- 『Node』の『Anchor』をX:"0"、Y:"0"にします。
アンカーポイントを左下隅にします。
- 『Node』の『Size』をW:"10240"、Y:"1024"にします。
W:"10240は25600(タイルマップの幅)×0.4(タイルマップのScale)です。
Y:"1024"は背景画像の高さです。
- 『Sprite』の『Type』を『TILED』にします。
ノードのサイズの分、背景画像を並べて表示します。
- ノードの名前を"ground"にします。
- 『ctrl + p』キー(またはプレビューボタン)を押して、プレビューを実行します。
ゲーム画面を一度クリックした後、プレイヤーをキー操作で移動出来ます。
【 注意 】クリックでゲーム画面をフォーカスしていないとキー操作出来ません。
*下図はgifです。クリックで再生します。(ブログの仕様でgifがループします。)
*キーボードとマウスの操作を表示するソフトを使っています。
今回作成したファイル
今回の作業によって下記のファイルのようになります。
今回はここまでです。お疲れさまでした。
続きは、こちらの記事です。