マリオみたいな２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.2
コードエディタ：Visual Studio Code（以下VS Code）
Tiled Version 1.3.4
ビットマップフォントエディタ：Sprite Font Builder Version 0.8.0

ステージ開始前の画面を作成する

　ステージが始まる前に、適度な時間を持たせるための画面です。
　カメラの子ノードにします。
　

Cocos Creatorで作業

『Node Tree』パネルで『Main Camera』を右クリック→『Create』→『Create Renderer Nodes』→『Sprite Node(Sprash)』をクリックしてノードを作成し、名前を”backboard”にします。
『Node Tree』パネルで『backboard』をドラッグ＆ドロップして下図の位置にします。
『Node Tree』パネルで『backboard』を選択して、『Properties』パネルで『Node』の『Color』を下図のように設定します。
『Properties』パネルで『Add Component』→『UI Component』→『Widget』をクリックします。
『Properties』パネルで『Widget』を下図のように設定します。
『Node Tree』パネルで『stageNo』を右クリック→『Duplicate』をクリックして複製し、名前を"bb_stageNo"にします。
『Node Tree』パネルで『bb_stageNo』をドラッグ＆ドロップして下図の位置にします。
『Node Tree』パネルで『bb_stageNo』を選択して、『Properties』パネルで『Widget』を下図のように設定します。
『Node Tree』パネルで『bb_stageNo』を選択して、『Properties』パネルで『Label』を下図のように設定します。
『Node Tree』パネルで『backboard』を選択して、『Node』の『Opacity』を"0"にします。
この設定は作業のためです。シーンが見えるように不透明度を0にしています。

プレイヤーの一時停止処理を実装する

　ステージ開始前の画面が消えるまで、プレイヤーと敵を停止させる必要があります。
　プレイヤー自体は操作する前なので元々停止しているのですが、ついでなのでこのタイミングで一時停止処理を実装します。
　敵は、プレイヤーの一時停止に同期して停止するようにします。
　

Cocos Creatorで作業

『Assets』パネルで『assets/script/player』をダブルクリックします。
VS Codeが起動します。
VS Codeで作業

『onKeyDown()』にキー入力をキャンセルする処理をを追加します。

    /* 省略 */
    inputCancel: boolean = false; // 入力をキャンセルする
    onKeyDown (event: cc.Event.EventKeyboard) {  // キーを押した時の処理
        if (this.inputCancel) { // キー入力をキャンセル中の場合
            this.inputRight = 0; // 入力を0にする
            this.inputLeft = 0; // 入力を0にする
            this.inputJump = 0; // 入力を0にする
            this.direction = 0; // 入力を0にする
            return; // キー入力キャンセル中の場合、処理を抜ける
        }
        /* 省略 */
    }

『_paused』とゲッターとセッターを追加します。
　一時停止にする場合は、現在の速度と重力スケールを保存した後に、両方の値を０にします。
　一時停止が解除された場合は、保存していた値に戻します。

    /* 省略 */
    set animation (value: string) { // _animationのセッターメソッド
        /* 省略 */
    }
    _paused: boolean = false; // 停止状態を保持する
    curVelocity: cc.Vec2 = cc.Vec2.ZERO; // 停止時に速度を保持する
    curGravityScale: number = 0; // 停止時に重力スケールを保持する
    get paused (): boolean { // _pausedのゲッター
        return this._paused; // 値を返す
    }
    set paused (value: boolean) { // _pausedのセッター
        if (this._paused == value) return; // 同じ値なら処理を抜ける
        this._paused = value; // 値を更新する
        let rigidBody: cc.RigidBody = this.node.getComponent(cc.RigidBody); // RigidBodyを取得する
        if(value){ // 停止中にする場合
            this.curVelocity = rigidBody.linearVelocity; // 現在の速度を保持する
            this.curGravityScale = rigidBody.gravityScale; // 現在の重力スケールを保持する
            rigidBody.linearVelocity = cc.Vec2.ZERO; // 速度をゼロにする
            rigidBody.gravityScale = 0; // 重力スケールをゼロにする
            this.inputCancel = true; // キー入力をキャンセルする
        } else { // 停止を解除する場合
            rigidBody.linearVelocity = this.curVelocity; // 停止前の速度に戻す
            rigidBody.gravityScale = this.curGravityScale; // 停止前の重力スケールに戻す
            this.inputCancel = true; // キー入力を受け付ける
        }
    }
    update (dt: number) { // 毎フレームの描画前の処理（dt：前フレームからの経過時間）
    /* 省略 */

『ctrl + s』キーを押して、コードを保存します。

Cocos Creatorで作業
『Assets』パネルで『assets/script/slimeBlue』をダブルクリックします。
VS Codeが起動します。
VS Codeで作業

『start()』にplayerノードを取得する処理を追加します。

    /* 省略 */
    player: any = null; // playerコンポーネント
    start () {
        /* 省略 */
        this.player = cc.find("Canvas/player").getComponent("player"); // playerコンポーネントを取得する
    }

『update()』にplayerのpausedに同期する条件文を付け加えます。

    update (dt: number) { // 毎フレームの描画前の処理（dt：前フレームからの経過時間）
        if (this.isHit) return; // 倒されている場合、処理を抜ける

        // 画面外にいる場合、またはプレイヤーが停止中の場合、停止する
        /* 省略 */
        if (Math.abs(distance.x) > this.moveDistanceX // 自ノードが画面外の場合
            || this.player.paused) { // または、プレイヤーが一時停止中の場合
            this.paused = true; // 一時停止する
            return; // 処理を抜ける
        } else { // それ以外の場合
            this.paused = false; // 一時停止を解除する
        }

        // 左右の移動
        /* 省略 */
    }

『ctrl + s』キーを押して、コードを保存します。

ステージ開始前の画面の処理を実装する

Cocos Creatorで作業

『Assets』パネルで『assets/script/player』をダブルクリックします。
VS Codeが起動します。
VS Codeで作業

『stageNo』のセッターを変更します。

    /* 省略 */
　lifeLabel: cc.Label = null; // ライフのラベルを取得する
　
    @property(cc.Node) // Cocos Creatorのエディタに表示する
    backboard: cc.Node = null; // ステージ開始前の画面のバックボードを取得する
    @property(cc.Label) // Cocos Creatorのエディタに表示する
    bb_stageNoLabel: cc.Label = null; // ステージ開始前の画面のステージ番号のラベルを取得する
    playData: PlayData = { score: 0, stageNo:1, life: 3 } // プレイデータに初期値を設定する
    get score (): number { // スコアのゲッター
    /* 省略 */
    set stageNo (value: number) { // ステージ番号のセッター
        this.playData.stageNo = value; // 値を取得する
        this.stageNoLabel.string = "Stage:" + ("0" + value.toString()).slice(-2); // ラベルに表示する
        this.bb_stageNoLabel.string = this.stageNoLabel.string; // ステージ番号を表示する
    }

『startTween ()』を追加します。
ステージ開始前の画面が透過するアニメーションを実装します。

    start () { // ステージに初期値を設定する
        /* 省略 */
    }

    startTween () { // ステージ開始前の画面を非表示にする
        cc.tween(this.backboard)
            .delay(1.0) // 1秒待つ
            .to(0.5, {opacity: 0}) // backboardを透明にする
            .call(() => {
                this.paused = false; // 一時停止を解除する
            })
            .start(); // このTweenを開始する
    }

『start()』で『startTween()』を実行します。

    start () { // ステージに初期値を設定する
        /* 省略 */
        this.startTween(); // ステージ開始前の画面を非表示にする
    }

『onLoad()』で開始前画面を表示して、一時停止中にします。

    onLoad () { // ノードが最初にアクティブになった時の処理
        /* 省略 */
        this.backboard.opacity = 255; // ステージ開始前の画面を表示する
        this.paused = true; // 一時停止中にする
    }

『ctrl + s』キーを押して、コードを保存します。

Cocos Creatorで作業
『Node Tree』パネルで、『player』ノードを選択して、『Properties』パネルで『player』スクリプトが見えるようにします。
『Node Tree』パネルから『Properties』パネルの『player』に下記のようにノードをドラッグ＆ドロップします。
- 『Node Tree』パネルの『backboard』→『Properties』パネルの『player』の『Backboard』
- 『Node Tree』パネルの『bb_stageNo』→『Properties』パネルの『player』の『Bb Stage No Label』
『ctrl + p』キー（またはプレビューボタン）を押して、プレビューを実行します。
ゲーム画面を一度クリックした後、プレイヤーをキー操作で移動出来ます。
【注意】クリックでゲーム画面をフォーカスしていないとキー操作出来ません。
＊下図はgifです。クリックで再生します。（ブログの仕様でgifがループします。）