◆ Cocos Creatorでスーパーマリオみたいな２Dアクションゲームを作ります。◆
◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
◆ 最初から読みたい場合はココをクリックして下さい。◆
こちらの記事の続きです。
今回はプレイヤーの操作に、二段ジャンプと調節ジャンプを追加します。
- 二段ジャンプ：ジャンプ中に空中でもう一度ジャンプします。
- 調節ジャンプ：ジャンプキーを押す時間の長さによってジャンプの高さを調節します。
【 注意 】この記事で使用しているCocos Creator v2.3.3は、VS Codeのデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。
使用環境
私が使用している環境です。
- OS：Windows 10 Home
- ブラウザ：Google Chrome (64-bit)
- 開発環境：Cocos Creator v2.3.3
- コードエディタ：Visual Studio Code（以下VS Code）
二段ジャンプを実装する
プレイヤーがジャンプ中に、もう一度キーを押すことでジャンプ出来るようにします。
下記のように実装します。
- ジャンプの回数を数えます。
- 着地していたら、ジャンプを開始します。（前と同じです。）
- 二回目のジャンプであれば、着地していなくてもジャンプ出来るようにします。
- 着地した時に、ジャンプの回数をリセットします。
- 『Assets』パネルで『assets/script/player』をダブルクリックします。
VS Codeが起動します。VS Codeで作業
- 『onKeyDown()』のジャンプを許可する条件を変更します。
/* 省略 */ jumpCount: number = 0; // ジャンプ回数カウント用変数 JumpCountMax: number = 2; // 最大ジャンプ回数、2：二段ジャンプ onKeyDown (event: cc.Event.EventKeyboard) { // キーを押した時の処理 switch(event.keyCode) { // 押されたキーの種類で分岐 /* 省略 */ case cc.macro.KEY.w: // 『w』キーの場合 case cc.macro.KEY.up: // 『↑』キーの場合 case cc.macro.KEY.space: // 『スペース』キーの場合 // ジャンプ処理 if (!this.inputJump) { // 『ジャンプ』の入力が0の場合 this.inputJump = 1; //『ジャンプ』の入力を1にする let velocity: cc.Vec2 = this.getComponent(cc.RigidBody).linearVelocity; // 現在の速度を取得 if (this.isLanging // 着地している場合 || (0 < this.jumpCount && this.jumpCount < this.JumpCountMax)) { // またはジャンプ回数が1～maxの場合 velocity.y = this.jumpSpeed; // ジャンプする（y+方向にジャンプ速度を与える） this.jumpCount ++; // ジャンプ回数を加算する } this.getComponent(cc.RigidBody).linearVelocity = velocity; // 速度を更新する } break; } }
- 『onBeginContact()』で着地した時にジャンプ回数を0にします。
/* 省略 */ onBeginContact (contact: cc.PhysicsContact, selfCollider: cc.PhysicsCollider, otherCollider: cc.PhysicsCollider) { // 接触開始時の処理 // 接点の場所を判定する /* 省略 */ // 足元に接触したブロックのUUIDを配列に追加する if (otherCollider.tag == 0) { // ブロックのコライダー（tag=0）の場合 if (isPlayerBottom) { // 足元の場合 /* 省略 */ this.jumpCount = 0; // ジャンプ回数を0にする } } }
- 『ctrl + p』キー（またはプレビューボタン）を押して、プレビューを実行します。
ゲーム画面を一度クリックした後、プレイヤーをキー操作で移動出来ます。
【 注意 】クリックでゲーム画面をフォーカスしていないとキー操作出来ません。
＊下図はgifです。クリックで再生します。（ブログの仕様でgifがループします。）
＊キーボードとマウスの操作を表示するソフトを使っています。
二段ジャンプできるようになりました。
Cocos Creatorで作業
調節ジャンプを実装する
ジャンプキーを押している時間の長さによって高さが変わるようします。
下記のように実装します。
- ジャンプキーを離した時にジャンプ中断フラグをtrueにします。
- ジャンプキーを押した時にジャンプ中断フラグにfalseにします。
- 『update()』にジャンプを中断する処理を追加します。
ジャンプで上昇中の場合、Y方向の速度が0になるまですばやく減速します。
- 『onKeyUp()』でジャンプ中断フラグをtrueにします。
jumpBreak: boolean = false; // ジャンプ中断フラグ、true：中断する onKeyUp (event: cc.Event.EventKeyboard) { // キーを離した時の処理 switch(event.keyCode) { // 押されたキーの種類で分岐 /* 省略 */ case cc.macro.KEY.w: // 『w』キーの場合 case cc.macro.KEY.up: // 『↑』キーの場合 case cc.macro.KEY.space: // 『スペース』キーの場合 this.inputJump = 0; //『ジャンプ』の入力を0にする this.jumpBreak = true; // ジャンプ中断フラグをtrueにする break; } }
- 『onKeyDown()』でジャンプ中断フラグをfalseにします。
/* 省略 */ onKeyDown (event: cc.Event.EventKeyboard) { // キーを押した時の処理 switch(event.keyCode) { // 押されたキーの種類で分岐 /* 省略 */ case cc.macro.KEY.w: // 『w』キーの場合 case cc.macro.KEY.up: // 『↑』キーの場合 case cc.macro.KEY.space: // 『スペース』キーの場合 // ジャンプ処理 if (!this.inputJump) { // 『ジャンプ』の入力が0の場合 this.inputJump = 1; //『ジャンプ』の入力を1にする let velocity: cc.Vec2 = this.getComponent(cc.RigidBody).linearVelocity; // 現在の速度を取得 if (this.isLanging // 着地している場合 || (0 < this.jumpCount && this.jumpCount < this.JumpCountMax)) { // またはジャンプ回数が1～maxの場合 velocity.y = this.jumpSpeed; // ジャンプする（y+方向にジャンプ速度を与える） this.jumpCount ++; // ジャンプ回数を加算する this.jumpBreak = false; // ジャンプ中断フラグをfalseにする } this.getComponent(cc.RigidBody).linearVelocity = velocity; // 速度を更新する } break; } }
- 『update()』にジャンプを中断する処理を追加します。
/* 省略 */ jumpDeceleration: number = 6000; // ジャンプキーを離したときの減速度 update (dt: number) { // 毎フレームの描画前の処理（dt：前フレームからの経過時間） let velocity: cc.Vec2 = this.getComponent(cc.RigidBody).linearVelocity; // 現在の速度を取得 // 左右の移動処理 /* 省略 */ // ジャンプ中断処理 if (this.jumpBreak) { // ジャンプ中断フラグがtrueの場合 if (this.jumpCount && velocity.y > 0) { // ジャンプ中かつ上昇中の場合 let d: number = this.jumpDeceleration * dt;; // 1フレーム当たりの減速量 if (velocity.y > d) { // 上昇速度が減速量より大きい場合（マイナスにしない） velocity.y -= d; // 減速する } else { velocity.y = 0; // 速度を0にする } } else { // ジャンプ中かつ上昇中ではない場合 this.jumpBreak = false; // ジャンプ中断フラグをfalseにする } } this.getComponent(cc.RigidBody).linearVelocity = velocity; // 速度を更新する }
- 『ctrl + p』キー（またはプレビューボタン）を押して、プレビューを実行します。
ゲーム画面を一度クリックした後、プレイヤーをキー操作で移動出来ます。
【 注意 】クリックでゲーム画面をフォーカスしていないとキー操作出来ません。
＊下図はgifです。クリックで再生します。（ブログの仕様でgifがループします。）
＊キーボードとマウスの操作を表示するソフトを使っています。
ジャンプの高さを調節出来るようになりました。
VS Codeで作業
今回作成したファイル
今回の作業によって下記のファイルのようになります。
今回はここまでです。お疲れさまでした。
続きは、こちらの記事です。
