Pong GameをCocos Creatorで作ってみた！ Part4 : ゲームオーバーとリスタート【Cocos Creator】
◆こちらでは簡単なPong Gameの手順や詳細な設定を可能な限りわかりやすくご紹介
しております。
◆今回はPart4となりますので、Part3は下記のページへ飛んでご確認ください。
◆またページ内で見づらく分からないことがございましたら、気軽にコメントでご連絡
をください。
使用環境
OS：macOS Big Sur バージョン11.2.1
ブラウザ：Google Chrome(x86_64)
開発環境：Cocos Creator v2.4.2
コードエディタ：Visual Studio Code(以下VS Code)
ゲームオーバー処理の実装
前回まではボールを画面内で画角に当たると反射する処理とボールをさまざまな位置で表示させる処理を行いました。しかし、現状はゲームを終了できずゲーム性は全くありません。ここでは、ゲームオーバー処理として下記の条件で実装していきます。
プレイヤー側にもわかりやすくするために『GameOver』と画面に表示されるようにUI(ユーザーインターフェイス)を作る(Cocos Creatorで操作)
『Restart』ボタンを下に作って、ゲームを再スタートさせる処理も作る
Cocos Creatorでの操作
ゲームオーバー画面を作る
『Canvas』をクリックで選択し、『Create->Create Renderer Nodes->Sprite Node(Splash)』を選択して名前を『gameOverNode』とする。
数値は下の画像に合わせて設定し、『Color』は黒(#00000096)に設定してください。
ラベルを作る
『gameOverNode』をクリックで選択し、『Create->Create Renderer Nodes->Node With Label』を選択して名前を『gameOverLabel』とする。
『Label』の文字や数値は下の画像のように設定してください。
- 『Add Component->UI Component->Widget』を選択し追加後、下の画像のように合わせてください。
リスタートボタンを作る
『gameOverNode』をクリックで選択し、『Create->Create UI Nodes->Node With Button』を選択して名前を『restartButton』とする。
『Add Component->UI Component->Widget』を選択し追加後、下の画像のように合わせてください。
- 『restartButton』の中にある『Label->Label』の数値を下の画像のように設定してください。
ここまで進めていればOKです。
VSCodeでの操作
ここでは『Game.ts』と『Ball.ts』の二つに各処理を書き込む
*『Game.ts』 → ゲームオーバー処理とリスタート処理を書き、合わせてゲーム状態を列挙型で管理する。
- 『Ball.ts』 → 『Game.ts』をインポートして、左の壁のタグの処理を書き換える。
処理を書き込む
- Game.ts
// ゲーム状態管理用(列挙型)
let State = cc.Enum({
READY: 0,
PLAYING_PONG: 1,
GAME_OVER: 9
});
const {ccclass, property} = cc._decorator;
/* 省略 */
@property(cc.Node)
gameOverNode: cc.Node = null; // 『gameOverNode』を格納する
state: number = State.READY; // ゲームの初期状態は『READY』
/* 省略 */
onLoad() {
/* 省略 */
this.state = State.PLAYING_PONG; // 『プレイ』状態にする
this.gameOverNode.active = false; // ゲームオーバー画面は非表示に
}
update(dt) {
// ゲームの状態が『プレイ』以外は処理を抜ける
if(this.state !== State.PLAYING_PONG) {
return;
}
}
// ゲームオーバーした時に呼ばれる関数
exeGameOver() {
// 設定しているコリジョンを無効にする
cc.director.getCollisionManager().enabled = false;
// ゲーム状態を『ゲームオーバー』にする
this.state = State.GAME_OVER;
// ゲームオーバー画面を表示する
this.gameOverNode.active = true;
}
// リスタートボタンを押した時に呼ばれる関数
restartStage() {
cc.director.loadScene("Game");
}
- Ball.ts
import Game from "./Game"; // 『Game』スクリプトをインポートする const {ccclass, property} = cc._decorator; @ccclass export default class Ball extends cc.Component { // インポートしたスクリプトを変数に格納 game: Game = null; init(game:Game) { this.game = game; } /* 省略 */ onCollisionEnter(other) { /* 省略 */ // 左の壁にぶつかった場合 if(other.tag == 2) { this.game.exeGameOver(); cc.log("GameOver"); } /* 省略 */ } /* 省略 */
ここまで処理を書き込んだら一旦Cocos Creatorに戻ります。
Cocos Creatorでの操作
『gameOverNode』を格納する
『restartButton』にクリックイベントを作る
- 『restartButton』の『Button』を選び、下の画像のように操作してください。
ここまでできたら『command⌘ + P』でプレビュー画面を出して、挙動を確認ください。できましたでしょうか？
ここでボタンを押してボールが出現したらOKです。それではお疲れ様でした。
参考資料
このサイトをもとに『PongGame』は作っております。
日本語版Cocos Creatorの説明書といっても過言ではないです！今回はTypeScriptのインポート周りを参考にしております！
この書籍は使っているバージョンは古いですが対応策などWebを調べると色々載っているので、是非調べてみてください！(分からなければできる範囲でお教えしますよ！)
今回はゲームオーバー処理とリスタート処理もこちらの書籍を参考にしております！
朱鷺 祐二 『CocosCreatorではじめるゲーム制作 (I・O BOOKS)』
おわりに
前回の投稿からだいぶ期間が空いてしまいました…。どうしても避けているとやらなくなってしまうのが悪い癖でして…。投稿間隔は毎日は難しいのですが、１週間に2~3本(ネタがあれば…)を目標に定期的にストックを増やしていきたいと思います！
このCocos Creatorは『Unity』や『Unreal Engine』などと比べるとあまり使われている方は少ないかと思われますが、PCにかかる負荷が軽量でサクサク作ることができるので私の気力が続く限り学んできたことや自作ゲームを投稿していきたいと思います！
現在はシューティングゲームを作ってみたいと考えているので、今回のPongGameが終わったら多少時間空くかと思いますが作って制作過程を投稿していきたいと思います。また、今書いているPongGameは次のPartで終わりになるかと思いますのでしっかり完結させたいと思います。
それでは今回はここまでとなります。ここまでお読みいただきありがとうございました！また次回お会いしましょう！
