マリオみたいな２Dアクションゲームを作る！その８カメラワークを設定する：Cocos Creator

　◆ Cocos Creatorでスーパーマリオみたいな２Dアクションゲームを作ります。◆
　◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
　◆ 最初から読みたい場合はココをクリックして下さい。◆
　
　こちらの記事の続きです。

mmorley.hatenablog.com

　
　今回は、カメラワークを設定します。
　カメラによって、シーンの中でゲーム画面に表示する範囲を設定しています。
　プレイヤーが移動した時に、カメラがプレイヤーを追いかけるよう処理を追加します。
　
【注意】この記事で使用している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）の座標に変換します。
基本的にノードの座標は、その親ノードに対する座標で指定します。
計算した座標が、カメラの移動範囲に収まるようにします。

Cocos Creatorで作業

『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』

ゲームの背景を設定する

　ゲームの背景が真っ暗なので画像を表示します。
　

Windows、Cocos Creatorで作業

Windowsのエクスプローラーで下記のフォルダ選択して、『Assets』パネルの『texture』にドラッグ＆ドロップします。
- Platformer Pack Redux (360 assets)\PNG\Backgrounds\blue_desert.png
  その１で入手した画像素材ファイルです。
『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』にします。
  ノードのサイズの分、背景画像を並べて表示します。
『ctrl + p』キー（またはプレビューボタン）を押して、プレビューを実行します。
ゲーム画面を一度クリックした後、プレイヤーをキー操作で移動出来ます。
【注意】クリックでゲーム画面をフォーカスしていないとキー操作出来ません。
　
＊下図はgifです。クリックで再生します。（ブログの仕様でgifがループします。）
＊キーボードとマウスの操作を表示するソフトを使っています。