iPhoneでヌルヌルキャラクターが動くゲームを作る方法
iPhoneのキャラクターがヌルヌル動いて、それらのキャラクターにタップ・フリックでいろいろ出来るアクションゲームの作成方法
- canvasを使ったり、left, topをいじるとキャラクターのスムーズでないため、css animations + css transformsのtranslate()でキャラクターを動かす
- 1) touchイベントのリスナーで、動いているキャラクターに対するアクションが実装できる場合
- touchイベントのリスナーを使う
- 2) touchイベントのリスナーで、動いているキャラクターに対するアクションが実装できない場合(例: 特定直線上の敵キャラクターへの攻撃等)
- 自分でキャラクターの座標を計算して、ヒットテストを行う
- css transformsの動きは、ベジェ曲線を利用しているので、ベジェ曲線の式を使えば、時刻tから現在位置が割り出せる
- transition-timing-functionごとの値も仕様に書いてあるので、その係数を利用する
- 問題は、css transformsの時刻tは、横軸上の値であり、ベジェ曲線では、横軸の値から縦軸の値を直接出すことはできない。
- そこで、ニュートン法を使ってt(時刻のtではない)を近似して、近似したtから縦軸上の値を算出する
- 後は縦軸上の値にtranslate()で渡したx,yの値をそれぞれかければ、現在時刻tのx,yの位置が計算できる
- 50%などで区切ると、それぞれの区間にtransition-timing-functionが適応されるので注意
- 自分でキャラクターの座標を計算して、ヒットテストを行う
