ランゲーの作り方③　キャラクターをジャンプさせる【enchant.js】

2019年1月21日

第1回：ランゲーの作り方①　まずは準備
前回：ランゲーの作り方②　キャラクターと背景の表示

今回はキャラクターをジャンプさせてみたいと思います。

キャラクターをジャンプさせるぞ！

ついにゲームらしい部分に入ってきましたね！！(・∀・)

とりあえず画面をタッチしたらキャラクターがジャンプするようにしてみます。

今回の最終的な目標がこちらです（画面をタッチしてみてね）。

で、その前に、まずキャラクターの位置をちゃんと決めたいと思います。Playerクラスを作るときのplayer.moveToメソッドの引数をキャラクターを配置したい場所に変更します。

var player = new Player(128, 128);
player.image = core.assets['img_player'];
player.moveTo(100, 365);//ここの数値を変更する
screen.addChild(player);

画面をタッチしたらジャンプ！

画面をタッチしたらジャンプするということなので、画面をタッチしたかどうかの判定が必要になります。なのでPlayerクラスに判定用のフラグを作ります。

var Player = enchant.Class.create(enchant.Sprite, {
    initialize: function(w, h){
        enchant.Sprite.call(this, w, h);
        this.walkPattern = [0, 1, 2, 1];
        this.walkIndex = 0;
        this.isJump = false;//ジャンプ判定用フラグ
    },

そしてMainGameScene内のタッチイベントの部分を以下のように修正します。

//自機の操作（このシーンへのタッチで操作）
this.addEventListener('touchstart', function(e){
    player.isJump = true;
});
this.addEventListener('touchend', function(e){//touchendに変わってるので注意
    player.isJump = false;
});

さらにループ処理内の背景の移動処理のあとに以下を追加します。

player.jump();

そしてPlayerクラス内に以下のメソッドを追加します。

jump: function(){
    if(this.isJump){
        this.y -= 10;
    }  
},

これで画面をタッチしているあいだキャラクターが上昇していきます。

だけどこれだとジャンプじゃないですよね。上昇が終わったら落下してもらわないと意味がありません。

キャラクターを落下させる

キャラクターが落下するということはジャンプ中でない時は常に落下中ということになります。なのでまずisJumpがfalseの間は落下するようにします。

if(this.isJump){
    this.y -= 10;
}else{
    this.y += 10;
}

しかしこれだと地面の下まで行ってしまうので地面で止まるようにします。

そこでまず、地面の位置の定数を作ります。先ほどのプレイヤーの位置をここに入れます。

var GROUND_Y = 365;

そして最初にキャラクターの位置を決めたmoveToメソッドの引数もこの定数に変えておきます。そしてPlayerクラスのjumpメソッド内を以下のように変更します。

if(this.isJump){
    this.y -= 10;
}else{
    this.y += 10;
    if(this.y > GROUND_Y){
        this.y = GROUND_Y;
    }
}

これで地面にめり込むことはなくなりました。だけどまだジャンプというには無理がありますよね(´Д｀)

さて、どうしましょ？

ジャンプの移動値を作る

画面をタッチしている間ずっと上昇してしまうのでジャンプ用の変数を使って移動値を管理するようにします。Playerクラスに以下のプロパティを追加します。

this.vy;

そしてタッチイベントを以下のように変更します。

//自機の操作（このシーンへのタッチで操作）
this.addEventListener('touchstart', function(e){
    if(!player.isJump){
        player.isJump = true;
        player.vy = -25;
    }
});
this.addEventListener('touchend', function(e){
    //処理なし
});

さらにPlayerクラスのjumpメソッドを以下のように変更します。

jump: function(){
    if(this.isJump){
        this.y += this.vy++;
        if(this.y > GROUND_Y){
            this.y = GROUND_Y;
            this.isJump = false;
        }
    }
},

これで実行してみると滑らかにジャンプしているように見えます。

簡単に説明すると、vyというプロパティーでキャラクターのy座標の移動幅を管理するわけですが、まず画面をタッチした際に、すでにジャンプ中ではないか判定します。すでにジャンプ中なのにジャンプるするとおかしなことになってしまいますからね(^^;)

そしてジャンプ中でなければisJumpをtrueにしてy座標の移動値であるvyに値を入れます。ここでvyの値がマイナスになっているということがポイントです。

jumpメソッド内ではまずジャンプ中かどうかを判定します。ジャンプ中であればキャラクターの座標にvyを足します。そして足し終わったらvyに１を足します。ここ重要です(・∀・)

こうやってマイナスの値が入っていたvyに１を毎回足していくと少しずつvyの値が増えていきそのうちプラスに変わります。マイナスの間はキャラクターは上昇していきますが、プラスに変われば下降します。このvyの変化がキャラクターがジャンプしているかのような動きを作ってくれます。どう？シンプルだけどすごいでしょ！(・∀・)

さてさて、これでジャンプは完成！！と言いたいところですが、やるならもっとハイレベルなものを目指したい！ってことでジャンプの高さをコントロールできるようにしてみます。

ジャンプの高さをタッチの長さで調整する

タッチしている時間が長いほど高くジャンプ、短いとちょこっとジャンプできればジャンプの動きとしてはもはや完璧と言っても過言ではないかと思います。そしてそれを実現する方法が意外とシンプルなんです( *´艸｀)

this.addEventListener('touchend', function(e){
    if(player.isJump && player.vy < 0){
        player.vy /= 2;
    }
});

touchendイベントはタッチが終了したとき発火するイベントなのでタッチが終了したときに、ジャンプが上昇中(vyがマイナス)であればvyの値を半分にします。たったそれだけ( *´艸｀)

ジャンプの画像を変えよう

せっかくなのでジャンプ中の画像を変更しましょう。

Playerクラスのonenterframeメソッド内を以下のように変更します。

onenterframe: function(){
    if(this.isJump){//ジャンプ中なら
        if(this.vy < 0){//上昇中
            this.frame = 4;
        }else{//下降中
            this.frame = 5;
        }
    }else{
        if(this.age % 5 == 0){
            if(++this.walkIndex >= this.walkPattern.length){
                this.walkIndex = 0;
            }
            this.frame = this.walkPattern[this.walkIndex];
        }
    }
}

ジャンプ中かどうか判定して画像を変更させます。そして上昇中か下降中かでも画像を変えるようにしました。これで画像も切り替わってよりジャンプらしくなりましたね(*´ω｀)

最後に一か所、着地したときにすぐにジャンプの画像から歩いている画像に変わるようにjumpメソッド内の着地に判定のところに画像を変える処理を加えます。

if(this.y > GROUND_Y){
    this.y = GROUND_Y;
    this.isJump = false;
    this.frame = 0;//この一行を追加
}

まとめ

これでキャラクターのジャンプ操作はばっちりですね(*´ω｀)今回のプログラムの内容はこちらから見ることができます→プログラムをチェック

複雑そうなジャンプの処理も意外と簡単だったんじゃないでしょうか？でもこういうのは「どうやったら出来るんだろうか？」って考えるのが大事なんです。これ以外にもジャンプさせる方法はたくさんあるはずなので、もっといい方法や、より作りたいゲームに適した方法などを自分なりに考えて作っていきましょう( ｀ー´)ノ

次回：ランゲーの作り方④　障害物を出す

☆私が本気で作ったランゲーも見てみてね！(pixi.js製)