Pong GameをCocos Creatorで作ってみた！ Part2: パドルをキーボードで動かす！ 【Cocos Creator】
◆こちらでは簡単なPong Gameの手順や詳細な設定を可能な限りわかりやすくご紹介
しております。
◆今回はPart2となりますので、Part1は下記のページへ飛んでご確認ください。
◆またページ内で見づらく分からないことがございましたら、気軽にコメントでご連絡
をください。
使用環境
- OS：macOS Big Sur バージョン11.2.1
- ブラウザ：Google Chrome(x86_64)
- 開発環境：Cocos Creator v2.4.2
- コードエディタ：Visual Studio Code(以下VS Code)
パドルをキーボードで動かす！
Playerスクリプトを作る
画面の左下の青いファイルにある『Script』フォルダーを選択し、右クリックから
『Create->TypeScript』 と選びます。
名前は『Player』とし、下記のようになります。
次に『paddle』コンポーネントを選び、『Add Component->Custom Component
-> Player』とすると下記に『Player』が表示されます。
『Script』が表示される場合は下記がデフォルトで表示されます。これからこの中身
を『VSCode』を使って書き込んでいきます。
VSCodeの設定を追加する
ここまでこの説明をするのを失念していたので、説明をします。CocosCreatorの画面
上部から『Developer -> VS Code Workflow』を選んでいただくと下記のように5つの
項目が出てきます。
これらはCocos CreatorのAPI拡張機能となります。VSCodeやTypeScript、Chromeの
デバッグ構成など開発を行う上で必要な機能が入っています。詳しい説明ができないの
でCocos Creator公式サイトやこちらのブログをご確認いただけると幸いです。
今回は5つ全てクリックして適用させます。
スクリプトにキーボード処理を有効にする
こちらからは『VSCode』を使って作業していきます。実装内容は以下の通りです。
- スクリプトの『onLoad()』に物理マネージャーを有効にする。(注:『start()』では有効になりません！)
- 同じく『onLoad()』にキーボード登録イベントをふたつ用意する。
- また『onDestroy()』にキーボード登録を削除するイベントを用意する。
- 『onKeyDown()』を作り、キーを押した時に発生するイベントを作る。
- 『onKeyUp()』を作り、キーを離した時に発生するイベントを作る。
- 最後に『update(dt)』にキーボード入力に連動してパドル(プレイヤー)を動かす処理を作る。
文字にするとかなり多いのですが、一つずつ書いていきます。
物理マネージャーを有効にする
『VSCode』で以下の通りに書きます。
・Player.ts
const {ccclass, property} = cc._decorator; @ccclass export default class Player extends cc.Component { onLoad () { // 物理マネージャーを有効にする let colliderManager = cc.director.getCollisionManager(); colliderManager.enabled = true; } }
※cc.director.getCollisionManager()ついては複数のスクリプトを書く際には、いず
れか一つ(今回ならPlayer.ts)に入っていれば有効になります。
キーボードイベントを登録／削除
『VSCode』で以下の通り書きます。
・Player.ts
const {ccclass, property} = cc._decorator; @ccclass export default class Player extends cc.Component { onLoad () { /* 省略 */ // キーボードイベントを登録する cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); } onDestroy() { // キーボードイベントを削除する cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); } }
cc.systemEvent.onのカッコ内の一つ目の引数はCocos独自の関数を入れます。詳し
いことは公式サイトのAPIをご覧ください。
二つ目の引数はこの後独自で作るキーボード処理の関数になります。入力している内
はエラーが出ますが、気にしなくで良いです。
また、三つ目の引数は動かすターゲットになるのでthis(Player)になります。
キーボードを押す／離す時の処理
実装する処理は以下のようにします。
- パドル(プレイヤー)は上下にのみ移動する。
- キーボードは『上: W』と『下: X』キーを押すと動くようにする。
それでは、『VSCode』で以下の通り書きます。
・Player.ts
/* 省略 */ // キーボード処理に関わる変数 direction: number = 0; // プレイヤーの方向 isTop: number = 0; // 上移動の入力状態 isBottom: number = 0; // 下方向の入力状態 onKeyDown(event: cc.Event.EventKeyboard) { // キーボードを押した際に呼び出される switch(event.keyCode) { case cc.macro.KEY.w: // 『w』キーを押した時 this.isTop = 1; // 上方向の入力を1にする this.direction = this.isTop - this.isBottom; // プレイヤーの移動方向 上: 1, 下: -1 break; case cc.macro.KEY.x: // 『x』キーを押した時 this.isBottom = 1; // 下方向の入力を1とする this.direction = this.isTop - this.isBottom; // プレイヤーの移動方向 上: 1, 下: -1 break; } } onKeyUp(event: cc.Event.EventKeyboard) { // キーボードから離した際に呼び出される switch(event.keyCode) { case cc.macro.KEY.w: // 『w』キーを押した時 this.isTop = 0; // 上方向の入力を0にする this.direction = this.isTop - this.isBottom; // プレイヤーの移動方向 上: 1, 下: -1 break; case cc.macro.KEY.x: // 『x』キーを押した時 this.isBottom = 0; // 下方向の入力を0とする this.direction = this.isTop - this.isBottom; // プレイヤーの移動方向 上: 1, 下: -1 break; } }
主に書き方は『モーリーのメモ』様のブログ記事を参考にさせていただきました！
TypeScriptでは変数を定義する際、関数内でしか使わないものには『let ~』と使用す
る関数内で定義するのですが、一番上にある変数はのちに『update(dt)』関数でも使用
するので関数の外で上記のように書きます。つまり複数の関数で使われる変数について
は、関数の外で定義し、使用する際には『this.direction~』といったように使用するよ
うに決まっています。
こちらについても『モーリーのメモ』様にわかりやすい説明が書かれている記事がご
ざいますので、ご覧ください。
プレイヤーの移動処理
ここでは『update(dt)』で『onKeyDown()』と『onKeyUp()』で受け取った方向の入
力処理をゲームとして移動処理に落とし込んでいく。以下の通りに実装します。
- 加速するスピードと最大速度を定義し、上は正の数で下は負の数で動くようにする。(わかりづらいと思うので、詳しくはコード参照)
- パドル(プレイヤー)が動いている時と停止している時にif()で設定する。
- 動いている時、画面外からはみ出ないようにするために速度制限をかける。(if()を使って)
- 停止している時は、減速処理が走るように変数を定義し、if()で処理する。
では、『VSCode』で以下の通り書きます。
・Player.ts
/* 省略 */ // 移動処理用の変数 acceleration: number = 500; // プレイヤーの加速度 maxSpeed: number = 272; // プレイヤーの最大速度 update(dt: number) { // 毎フレームの描画前の処理（dt：前フレームからの経過時間） if(this.direction != 0) { // 移動している場合 this.node.y += this.acceleration * dt * this.direction;// プレイヤーの速度を計算する if(this.node.y < -this.maxSpeed) this.node.y = -this.maxSpeed; // 下方向の最大速度を制限する else if(this.node.y > this.maxSpeed) this.node.y = this.maxSpeed; // 上方向の最大速度を制限する } else { // 停止する場合 if(this.node.y != 0) { // 速度が0でない場合 let d: number = this.acceleration * dt; // 1フレームあたりの減速量 if(this.node.y < -d) this.node.y += d; // 下方向の減速処理 else if(this.node.y > d) this.node.y -= d; // 上方向の減速処理 else this.node.y = 0; // 速度が減速量以下だと停止する } } }
こちらも『モーリーのメモ』様の同記事を参考に書かせていただきました！
『RIgidBody』で書こうとするとパドル(プレイヤー)とボールがぶつかった際に反動でず
れてしまったりと修正に難ありだったため部分的に書き換えております。
ここまで書き込んだら保存(command⌘ + S)して『command⌘ + P』で挙動を確認し
てください。動きましたでしょうか？
まだGIF画像の作り方が分からないので、次記事をあげる際には作れるように精進し
て参ります。
それでは今回はここまでになりますお疲れ様でした。
参考資料
多分CocosCreator触ったことある方は必ずお世話になっているかと思います！とても
わかりやすく私も勉強させていただいております！
実は最後に書いた移動処理を『RigidBody』以外での書き方はこの方の書き方を見て
閃きました！次回はこちらを参考にしたものが主になると思います！
おわりに
なんとか書き終えた…(汗)。明日は仕事なので今日中に一本書き上げたいと思い、
調べつつ形にできました。本当はもう少し書こうかと思っていたのですが、『GIF画
像』の作り方がまだ分からずここから先は必要になってくると感じたので終わらせまし
た…。
以前にもブログ記事は書いていたのですが、ブログの見た目とかほとんどいじらずた
だ日記みたいな感じで書いていたので飽きてやめてしまいましたが、ある程度いじって
時間かけてやってみるとできた時の達成感はなにものにも変えがたいものだと感じまし
た！
ここまで読んでいただいた優しい読者の方、本当にありがとうございました！
次回もまたお越しください！
