【enchant.js】三角関数を使って弧を描く動きを作る

2019年4月29日

ちょっと前に自作の三角関数クラスの記事を書きましたが今回はその三角関数クラスを使って敵の動きなんかを作ってみましょう。

enchant.js以外のユーザーの方でも前回の三角関数クラスを見れば内容は理解はできると思うので挑戦してみてください(‘ω’)ノ

1 まずは移動の基本的なこと
2 ユラユラうねうね動かす方法
3 ぐるぐる円を描くように動かす方法
4 まとめ

まずは移動の基本的なこと

まず基本的なことですが、単純に敵のｘ、ｙ座標に数字を足したり引いたりすれば敵は移動しているように見えます。なので

x += 1;
y += 1;

とすれば右下に移動しているように見えます。ただしこの場合、このキャラが右斜め下45度に固定されて移動するならいいですが、真下に移動(y+=1)したり、右に移動(x+=1)したりすると移動スピードが違ってきます。ここで三角関数が出てくるわけです。

まず私の三角関数クラスを使う場合、計算されているcos配列とsin配列の０番目(０度)の値はそれぞれ１と０になっていて、方向で言うと右に向いています。そこから角度が増えるごとに時計回りに回っていきます。

で、使う場合は移動させたい角度を決めて

var trig = new Trigonometry(0.01);//三角関数クラスね
enemy.speed = 3;
enemy.angle = 30;//値はラジアン×100(0.01刻みで作ってるから)
enemy.x += trig.cos[enemy.angle] * enemy.speed;
enemy.y += trig.sin[enemy.angle] * enemy.speed;

のように入力するとその角度に対しての移動量が計算されて移動します。

直線だとこれでOKです。次は曲線に挑戦してみましょう。

ユラユラうねうね動かす方法

シューティングゲームでよく見かける左右または上下にうねうね動く敵キャラを作ります。これは例えば左右に動きながら前進してくるのであればx座標がcosで動きながらy座標は一定のスピードで動く感じです。

enemy.angle += 3;
enemy.x += trig.getData(enemy.angle).cos * enemy.speed;
enemy.y += 1;

こんな感じで毎フレームごとにangleを加算して角度を変えていきます。これで左右に動きながら下に降りてくるような動きになります。

ここで一つ注意なのが揺れる速さが角度の増加スピードとenemy.speedの値で決まります。角度の増加量が大きくなるほど横揺れが小さくなりますが揺れる速さは早くなります。値が小さいほどゆっくり大きな揺れになります。なので好みの揺れ方を作るにはこの角度の増加量と移動量をうまく調整する必要があります。

ぐるぐる円を描くように動かす方法

単純には上の例のy座標をsinで動かすと円の動きになります。ただ、この場合移動量は角度に対しての円周のような感じになるので描く円の大きさが分かり辛かったりします。弧を描きたいだけならそれでいいんですが「ボスの周りを回転させたい」となると次のやり方の方がやりやすいです。

enemy.angle += 3; 
var result = trig.getData(enemy.angle);
enemy.x = boss.x + boss.width * 0.5 + result.cos * 100;//最後の数字(100)は半径になる 
enemy.y = boss.y + boss.height * 0.5 + result.sin * 100;

この例では移動量を加えていくわけではなく、原点となるボスの中心からの位置を直接指定しています。こうすることでボスを中心に回っているように見えます。

ここで注意なのがまず座標の計算式で最後にかけている数字(例では100)が円の半径になります。そして角度の増加量が円をまわるスピードになります。数字の意味が変わってくるので注意してください(‘ω’)ノ