[Cocos Creator]横スクロールしてみる12 -ゲームオーバー画面-

cocos

スコアを最後に表示しないとどれくらい進んだかどうかがわからないので最後に表示するようにしてみようとか思っている。

個人的に今の段階の死んだらすぐにリスタートをするのが好きだ。

やり込むとなるとそれくらいスピーディーに進んだ方が楽しいから。

でも今回のスコア表示をするついでにリスタートボタンをついでにつけてしまおうと思います。

まずCanvasの上で右クリックして

Create→CreateUINodes→NodeWithLayout

と選択するとグレー(だったかな)の四角が表示されるので適当な場所に、適当な色にします。あと、名前を変えます。
シンプルにGameOverにしました。これがこれから色々表示させる土台になります。まさにキャンバス。

次にGameOverノードの上で右クリックをしてCreate→CreateRendererNodes→NodeWithRichText

と選択をしてGameOverの下にラベルを配置します。適当に名前をつけてあげて、StringをGAMEOVERにします。
適当な色にできます。色がいらないって人はただのLabelで良いです。

次にGameOver右クリック→Create→CreateUINodes→NodeWithButton

適当な名前をつけます。これがリスタートボタンになる子です。
StringをRESTARTかなんかにします。「もう一度遊ぶ」でもいいですね

次にGameOverノードの上で右クリックをしてCreate→CreateRendererNodes→NodeWithRichText

これもLabelでも良いです。ここにスコアを表示させていきます。

全部配置し終わったらGameOverノードのPropertiesの左上のチェックボタンを外して表示しないようにします。

入れ子にしたのはこうやって土台を非表示すれば全てが非表示になるだとか、グループで操作できるようになります。

なにもない空。。。

そしたらスクリプトを書いていきます。

いつも通りGameManagerのpropertiesに追加します。

        gameOverMenu: {
            default: null,
            type: cc.Node
        },
        currentScore: {
            default: null,
            type: cc.RichText // Labelの人はcc.Label
        },

としてあげて、操作するノードを登録していきます。

以前作ったメソッドに手を入れていきます。

    exeGameOver: function() {
        // ゲームオーバーアニメーション
        this.gameoverEffect.resetSystem();
        cc.audioEngine.play(this.gameoverSound,false,0.5);
        // ゲーム全体の衝突判定OFF
        cc.director.getCollisionManager().enabled = false;
        // ゲームオーバーフラグ
        this._status = Status.GAMEOVER;
        // 1秒後にリスタートする
        this.schedule(function () {
//            cc.director.loadScene('GameScene'); // 以前はこれで死んだ瞬間にリスタートしていた
            this.gameOverMenu.active = true;      // 追加箇所
            this.currentScore.string = 'Score: ' + Math.floor(this._score); // 追加箇所
        }, 1.35);

これで死んだらアラートのように表示されるようになりました。
次はリスタートボタンを押したらリスタートするようにします。

上のスクリプトで消した部分のメソッドを定義します。

    // 呼び出し用リスタート関数
    restartGame: function () {
        cc.director.loadScene('GameScene');
    },

スクリプトは以上です。シンプル。

GameManagerのPropertiesにGameOverとか先ほど作ったノードを登録します。

最後にヒエラルキーのリスタートボタンをクリックしてpropertiesのButtonのところのClickEventsを1にして右のプルダウンからGameManagerのrestartGameメソッドをアサインします。

こうすることで、このボタンを押されたらどのメソッドを実行するかを決めることができます。

では、動かしてみましょう。

12-movie

コメント

タイトルとURLをコピーしました