はじめに
こちらのQiitaは勝手連載「ジャンプ＆ランゲームを作ろう」になります。
初回の記事はこちらです。
【連載】ジャンプ＆ランゲームを作ろう(1) プロジェクト作成
※お断り※ 毎日お昼休みに15分程度で執筆していおり細切れになりましてすみません
今日の内容
今日はボールを表示させます。画面をタップするとボールは上にジャンプし自然に落下します。
また、カメラはボールに追従します。ボールの真横に常に追従するのではなく、追っかける実装にしました。
今回のソースコード
解説
フレームレートを30から60にあげます
index.html
data-entry-class="Main"
data-orientation="portrait"
data-scale-mode="fixedWidth"
- data-frame-rate="30"
+ data-frame-rate="60"
data-content-width="640"
data-content-height="1136"
data-multi-fingered="2"
タップイベントの処理
タッチ開始イベントegret.TouchEvent.TOUCH_BEGINのハンドラーthis.tapを登録します。
ハンドラーでは、ジャンプ処理などを行わずに、tapped変数をtrueにして、タップフラグを立てるだけです。
Main.ts
private async runGame() {
:
+ this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.tap, this);
}
:
+ private tapped: boolean;
:
+ private tap(e: egret.TouchEvent) {
+ this.tapped = true;
+ }
ボールの初期化
ボールの底面の判定が重要なので、ボールの底面をボールのY座標にします。
Main.ts
private createBall() {
this.ball = new egret.Shape();
this.ball.x = 0;
this.ball.y = 0;
{
const g = this.ball.graphics;
g.beginFill(0xcccc00);
g.drawCircle(0, -16, 16);
g.endFill();
}
this.world.addChild(this.ball);
}
ボールの更新処理
まずボールがタップされたら、垂直方向の速度ballVyを画面上方向に加速させます。
またボールが床についていない(座標が0未満)ならボールに重力を働かせます
そして、速度(ballVx,ballVy)に応じてボールの位置を移動させます。
ボールが床にめりこまないように調整をします。
Main.ts
private updateBall() {
if (this.tapped) {
this.ballVy -= 3;
this.tapped = false;
}
if (this.ball.y < 0) {
this.ballVy += 0.1;
}
this.ball.x += this.ballVx;
this.ball.y += this.ballVy;
if (0 <= this.ball.y) {
this.ballVy = 0;
this.ball.y = 0;
}
}
まとめ
今日は時間がないので以上です。