マニュアルのチュートリアルをやってみる！その３（完）：Cocos Creator

＜今回やること！＞

こちらの記事の続きを行います。
mmorley.hatenablog.com
スコアの表示、ゲームが失敗した時のシーンのリロードや効果音の再生の処理等を追加します。

　
　今回でチュートリアル完了です。

目次
使用環境
スコアの追加
- スコアのラベル（Label）を追加
- 『Game』スクリプトに得点のロジックを追加
失敗の判定とリスタート
- 制限時間内に消えるロジックを星に追加
効果音を追加
- ジャンプの効果音
- 得点時の効果音
あとがき
おすすめ・関連する記事

使用環境

　私が使用している環境です。

Mac OS X El Capitan Version 10.11.6
Cocos Creator Version 2.1.1
ブラウザ：Google Chrome Version 73.0.3683.103 (64-bit)

スコアの追加

　キャラクターが星を採取した時の得点の加算と表示の処理を追加します。
　ゲーム開始時はスコアは0で、星を１つ採取したら1点加算します。

スコアのラベル（Label）を追加

スコアを表示するためにLabel』ノードを作成します。

『Node Tree』パネルで『Canvas』ノードを右クリックし、『Create』→『Create Renderer Nodes』→『Node With Label』をクリック
作成した『New Label』を右クリックして『Rename』をクリックし、名前を"score"に変更
『score』ノードを選択し、『Properties』パネルで『Label』コンポーネントを設定
『Properties』パネルで『Node』を設定

『Game』スクリプトに得点のロジックを追加

『Assets』パネルで、『Game』スクリプトをダブルクリックして開く

コードエディタで、『Game』スクリプトの『properties』の最後に下記のコードを追加
スコア表示用の『Label』を参照するためのプロパティです。
前のプロパティの最後に『,（カンマ）』がなければ追加して下さい。

// Game.js
    properties: {
        // ...省略
        // 『score』ラベル取得用の変数
        scoreDisplay: {
            default: null, // デフォルトの値をnullに設定
            type: cc.Label // プロパティの型をラベルに設定
        },
    },

コードエディタで『Game』スクリプトを保存
『Node Tree』パネルで『Canvas』ノードをクリック
『Node Tree』パネルから『score』ノードを『Properties』パネルの『Game』コンポーネントの『Score Display』にドラッグ

コードエディタで『Game』スクリプトの『onLoad』メソッドに下記のコードを追加
得点用の変数を初期化します。

// Game.js
    onLoad: function () {
        // ...省略
        // 得点を初期化
        this.score = 0;
    },

『Game』スクリプトの『update』メソッドの後ろに『gainScore』メソッドを追加

// Game.js
    gainScore: function () {
        this.score += 1;
        // 『scoreDisplay』ラベルのスコア表示を更新
        this.scoreDisplay.string = 'Score: ' + this.score.toString();
    },

コードエディタで『Game』スクリプトを保存
『Assets』パネルで『Star』をダブルクリックして開く

『Star』スクリプトの『onPicked』メソッドを下記のように変更
『gainScore』の呼び出しを追加します。

// Star.js
    onPicked: function() {
　　 // 『Game』コンポーネントの『spawnNewStar』メソッドを呼び出して、新しく星を生成
        this.game.spawnNewStar();
        // 『Game』スクリプトの得点用のメソッドを呼び出す
        this.game.gainScore();
        // 『star』ノードを破棄
        this.node.destroy();
    },

コードエディタで『Game』スクリプトを保存
プレビューボタンを押して、動作を確認します。

星を採取した時、画面の上部に表示されたスコアが加算されます。

失敗の判定とリスタート

　時間ととも星が消える動作を追加します。採取する前に星をが完全に消えるとゲームオーバーとします。

制限時間内に消えるロジックを星に追加

『Game』スクリプトの『onLoad』メソッドを下記のように変更
『spawnNewStar』を呼び出す前に時間のカウントに必要な変数の宣言を追加します。

// Game.js
    onLoad: function () {
        // 『ground』のアンカーポイントのy座標を取得
        this.groundY = this.ground.y + this.ground.height / 2;
        // タイマーを初期化
        this.timer = 0;
        // 星の持続時間（星が消えるまでの時間）を初期化
        this.starDuration = 0;  
        // 新しい星を生成
        this.spawnNewStar();
        // 得点を初期化
        this.score = 0;
    },

『Game』スクリプトの『spawnNewStar』メソッドを下記のように変更
メソッドの最後にタイマーをリセットする処理を追加します。
『this.minStarDuration』と『this.maxStarDuration 』は『Game』スクリプトで定義したプロパティです。星の持続時間の乱数の幅です。

// Game.js
    spawnNewStar: function() {
        // ...省略
        // タイマーをリセットし、星の持続時間に乱数値（min〜max）を設定
        this.starDuration = this.minStarDuration + Math.random() * (this.maxStarDuration - this.minStarDuration);
        // タイマーをリセット
        this.timer = 0;
    },

『Game』スクリプトに下記のように『update』メソッドを追加
タイマーが星の持続時間を超えたかを判定を行う処理を追加します。

// Game.js
    update: function (dt) {
        if (this.timer > this.starDuration) { // タイマーが星の持続時間を超えた場合
            this.gameOver();  // ゲーム失敗のロジックを呼び出す
            return;
        }
        this.timer += dt; // タイマーを加算
    },

『Game』スクリプトに『gameOver』メソッドを追加
失敗した場合に、実行中のアクションを停止し、シーンをリロードします。

// Game.js
    gameOver: function () {
        this.player.stopAllActions(); // 『Player』ノードのジャンプアクションを停止
        cc.director.loadScene('game'); // 『game』シーンをロードする
    },

コードエディタで『Game』スクリプトを保存

『Star』スクリプトの『update』メソッドの最後に下記のコードを追加
時間とともに星が消える処理を追加します。

// Star.js
    update: function() {
        // ...省略
        // 経過時間と星の持続時間から、透明度の割合を計算
        var opacityRatio = 1 - this.game.timer / this.game.starDuration;
        // 透明度の最小値
        var minOpacity = 50; 
        // 星のノードの透明度を設定
        this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));
    },

コードエディタで『Star』スクリプトを保存
これでゲームのプレイに関する基本的な処理は完成です。
プレビューボタンを押して、動作を確認します。

効果音を追加

　次にゲームに効果音を追加します。

ジャンプの効果音

　ジャンプの効果音を追加します。

『Player』スクリプトの『properties』に『jumpAudio』を追加

// Player.js
    properties: {
        // ...省略
        // ジャンプの効果音のリソース
        jumpAudio: {
            default: null, // デフォルトをnullにする
            type: cc.AudioClip // AudioClip型にする
        },
    },

『Player』スクリプトの『setJumpAction』メソッドを下記のように変更
効果音を再生するコールバックを『playJumpSound』メソッドを追加して音を再生します。

// Player.js
    setJumpAction: function () {
        // ジャンプアップ（ジャンプの最高地点まで移動）するアクションを定義
        var jumpUp = cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // ジャンプダウン（ジャンプで地上まで落下）するアクションを定義
        var jumpDown = cc.moveBy(this.jumpDuration, cc.v2(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // アクションが終わった後に呼び出されるコールバック関数を追加
        var callback = cc.callFunc(this.playJumpSound, this);
        // リピート（ジャンプアップ→ジャンプダウン→着地音再生→ジャンプアップ→・・・の繰り返し）するアクションを返す
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback));
    },

    playJumpSound: function () {
        // 着地音を再生
        cc.audioEngine.playEffect(this.jumpAudio, false);
    },

コードエディタで『Player』スクリプトを保存
『Node Tree』パネルで、『Player』ノードをクリック
『Assets』パネルの『audio』フォルダの『jump』を『Properties』パネルの『Player』コンポーネントの『Jump Audio』にドラッグ

得点時の効果音

『Game』スクリプトの『properties』に『scoreAudio』を追加

// Game.js
    properties: {
        // ...省略
        // 得点の効果音のリソース
        scoreAudio: {
            default: null, // デフォルトをnullにする
            type: cc.AudioClip // AudioClip型にする
        },
    },

『Game』スクリプトに『gainScore』メソッドを追加

// Game.js
    gainScore: function () {
        this.score += 1;
        // 『scoreDisplay』ラベルのスコア表示を更新
        this.scoreDisplay.string = 'Score: ' + this.score.toString();
        // 得点時の効果音を再生
        cc.audioEngine.playEffect(this.scoreAudio, false);
    },