Pong GameをCocos Creatorで作ってみた！ Part5: スコアとハイスコア更新 【Cocos Creator】
◆こちらでは簡単なPong Gameの手順や詳細な設定を可能な限りわかりやすくご紹介
しております。
◆今回はPart5となりますので、Part4は下記のページへ飛んでご確認ください。
◆またページ内で見づらく分からないことがございましたら、気軽にコメントでご連絡
をください。
使用環境
OS：macOS Big Sur バージョン11.2.1
ブラウザ：Google Chrome(x86_64)
開発環境：Cocos Creator v2.4.2
コードエディタ：Visual Studio Code(以下VS Code)
プレイヤー(パドル)に触れたら、スコアが更新される処理を作ろう！
前回まではプレイヤー(パドル)の後ろにある壁に触れたらゲームオーバー処理が走り、『gameOverNode』が表示されて『restartButton』を押すとゲーム画面が初期化されるようになる。
今回はゲームプレイ中にプレイヤーがボールに触れると得点が加算されて、数値が表示されていることがわかるように実装していく。
Cocos Creatorでの操作
1. 『Main Camera』を選択して『Node->Size』の『W: 816 H: 624』と設定してください。(初期値のままの方は飛ばしてOKです)
2. 再度『Main Camera』を選択し右クリックで『Create->Create Renderer Nodes->Sprite Node(Splash)』を選択、名前を『scoreLabel』とします。
3. 『Label』を下の画像のような数値を設定してください。
4. 『add Component->UI Component->Widget』を追加して、下の画像のように数値を設定してください。
5. 『gameOverNode』に先ほど作った『scoreLabel』をコピー&ペーストして貼り付ける。
6. 『Label』を下の画像のような数値を設定してください。
7. 『add Component->UI Component->Widget』を追加して、下の画像のように数値を設定してください。
8. 下の画像のようなレイアウトになったらOKです。
VSCodeでの操作
『Game』と『Ball』スクリプトにコードを書き込んでいく。詳しい内容はコードの近くにコメントで説明していきますので、ご覧ください。
Game.ts
// Cocos Creator側で表示されるプロパティ
/* 省略 */
@property(cc.Label)
scoreLabel: cc.Label = null; // 『scoreLabel』を格納する
state: number = State.READY; // ゲームの初期状態は『READY』
score: number = 0; // スコア変数
/* 省略 */
exeGameOver() {
/* 省略 */
// スコア更新
// 『gameOverNode』の子ノードである『scoreLabel』の『Label』を取得
let scoreLabel = this.gameOverNode.getChildByName("scoreLabel").getComponent(cc.Label);
scoreLabel.string = "Score:" + this.score; // 『Label』をstringに変換する。
}
// スコアを増やす関数
gainScore() {
this.score += 1; // 関数を更新するごとにスコアが増える
this.scoreLabel.string = "Score:" + this.score.toString(); // 『Label』をstringに変換する。
}
Ball.ts
/* 省略 */
onCollisionEnter(other) {
this.speed += 20;
/* 省略 */
// パドル(プレイヤー)がぶつかった場合
if(other.tag == 0) {
this.x_direction *= -1;
this.game.gainScore(); // New
cc.log("Player Hit");
}
}
/* 省略 */
動作確認
ここまでやり終えたら、Cocos Ceratorに戻って『Canvas』の『Game』スクリプトに『scoreLabel』を格納してください。
『command⌘ + P』でプレビュー画面を開いて動作を確認してください。
ハイスコアを更新して、記録できるようにしよう！
先ほど作ったスコア使って、ハイスコアを更新できる処理を作っていきます。『Game』スクリプトに処理を書き込んでいき、『gameOverNode』にハイスコア更新できるようにレイアウトも追加していきます。
Cocos Creatorでの操作
1. 『gameOverNode』を選択し、『Create->Create Renderer Nodes->Sprite Node(Splash)』を選択して名前を『bestScoreLabel』とする。
2. 『Node』、『Label』をそれぞれ下の画像のように設定する。
3. 次に『add Component->UI Component->Widget』を追加して、下の画像のように数値を設定してください。
4. ここまで出来たら下の画像のようなレイアウトが出来上がっていればOKです。
VSCodeでの操作
『Game』スクリプトにコードを書き込んでいく。詳しくはコードの近くにコメントを書いていきますので、そちらをご確認ください。
Game.ts
/* 省略 */
// ユーザーデータの定義
type UserData = {
highScore: number
}
const {ccclass, property} = cc._decorator;
/* 省略 */
onLoad() {
this.readUserData(); // 保存したセーブデータを読み込む
this.randomRange = cc.v3(300, 200, 0); // 初期位置
this.createBall(); // ボールを作り出す関数
this.state = State.PLAYING_PONG; // 『プレイ』状態にする
this.gameOverNode.active = false; // ゲームオーバー画面は非表示に
}
/* 省略 */
exeGameOver() {
/* 省略 */
// ハイスコアを更新
if(this.userData.highScore < this.score) { // プレイしたスコアがこれまで記録したスコアを超えたら
this.userData.highScore = this.score; // 更新する
// 『bestScoreLabel』を表示させる
this.gameOverNode.getChildByName("bestScoreLabel").active = true;
} else { // そうでないなら
// 『bestScoreLabel』を非表示にする
this.gameOverNode.getChildByName("bestScoreLabel").active = false;
}
// 『bestScoreLabel』の『Label』を取得する
let highScoreLabel = this.gameOverNode.getChildByName("bestScoreLabel").getComponent(cc.Label);
highScoreLabel.string = "Best Score:" + this.userData.highScore; // 『Label』をstringに変換する。
this.writeUserData(); // セーブデータに保存する
}
/* 省略 */
// セーブデータを書き込む関数
writeUserData() {
// JSONオブジェクトを文字列にして保存
cc.sys.localStorage.setItem("UserData", JSON.stringify(this.userData));
}
// 記録したデータを読み出す関数
readUserData() {
// ストレージからデータを取得
let data = cc.sys.localStorage.getItem("UserData");
cc.log(data); // 確認用ログ
if(data !== null) {
// 見つかったらセーブファイルのデータを適用
this.userData = JSON.parse(data);
} else {
// 見つからなかったら初期値をリセット
this.userData = this.userData;
}
}
動作確認
『command⌘ + P』でプレビュー画面を開いて動作を確認してください。
onLoad()で読み込まれたデータ(1枚目のhigh score: 12)をプレイしてそのスコアを超えていくと、『gameOverNode』に表示が増えます。(2枚目)その後、『restartButton』を押してシーンを読み込み直すと新たなデータを更新する。(3枚目のhigh score: 13)
ここまで出来たら『PongGame』は完成となります！だいぶ簡単で面白味は薄いものになってしまいますが、入門として是非参考にしてください。
さらに発展させるには…
- 右側のスペースにボールの動きに合わせて追従するエネミー(敵)を作る。
- ラリーが続くとお助けアイテムが出るようにする(ボールのスピードが遅くなる、スマッシュ撃てる等)
などなど上であげたものは私自身も１から作ったりすることが出来ていないので、今後の宿題として考えて実装できるようにしたいと思います！
それではここまで５回に渡って見て実践していただいた方々、お疲れ様でした！
参考資料
この記事をもとにして『PongGame』を作らせていただきました。ありがとうございます！
日本語版Cocos Creatorの貴重な資料が詰まっています！お世話になっております！
バージョンが変わっても色褪せない書籍！今回はこちらの書籍をもとに作らさせていただいています！
朱鷺 祐二 『CocosCreatorではじめるゲーム制作 (I・O BOOKS)』
おわりに
ここまでお付き合いいただきありがとうございました！中身としてはそこまで内容が濃いものではないので「既に知ってるよ！」と感じる方も居たかと思います。
しかしCocos Creatorを使ってゲーム制作をしていこうとなると日本語版の情報が少なく、中にはバージョンが変わって使えなくなっているAPIもあるので、英語版や中国語版で探すのは難しく手が出せない方向けに助けになればと思い書かせていただいております。
現在はまだ他の方の模倣や引用したものを少し書き換えることしかできない状態なのですが、時間と理解を重ねてこの『はてなブログ』で発信して積み上げて参りたいと思います。
今後につきましてはCocos Creatorに載っているAPIをもとに使い方だったり、『PongGame』で使った関数やコードの解説、あとは『グラディウス』を模したシューティングゲームを作ってみたいなと思って手を動かしておりますので、記事があがりましたら是非お読みになってください。
それではここまでお読みいただきまして誠にありがとうございました！また次回もご覧ください！
