ツクラーが始めるPixiJS v4入門 その4

はいどーもこんばんは無職です。
今回はSpriteを動かしてみようと思います。

tickerを使う

ゲーム中で各画像に動きをつける(今回の場合だとスプライトを動かす)には、ゲームループを使うのが最も一般的ではないかなと思います。
PixiJSにはtickerという機能があって、コレを使ってループ関数を作成することができます。
このループ関数は毎秒60回呼ばれるようです。
つまり固定フレームレートなんですかね。Unityは可変フレームレートなので(固定フレームレートにもできますが)、そこが違うっぽいです。
例えば以下のような関数を作成し、setup関数内で呼んでください。

deltaはちょっと何の値かよくわかりませんでした。
「前回のフレームからの差」を何らかの方法で正常値を1に正規化したものだと思うのですが(つまりラグがあると1より小さくなり、逆に高速に動作していると1より大きくなる場合もある。が、固定フレームレートなのに……ウーン?)、とりあえず保留で。

移動させる

移動させる方法は簡単です。
単にスプライトのxプロパティの値を毎フレーム足したり引いたりすればいいだけです。
例えばこう。

yellowSpriteはcreateTilesetByAtlas関数内で使用していましたが、これをグローバル変数に変えておいてください。

注*実際の開発ではこんな雑な書き方しないでください。

あとは実行すればyellowSpriteが右に移動していきます。

キーボード操作可能にする

最近はキーボード操作よりもマウス操作の方が需要がある気がするのですが(特にブラウザゲー)、とりあえずキーボード操作してみようと思います。
公式チュートリアルのコードをとりあえずコピペします。

コレを利用するコードは以下の通りです。
setupの中で呼んでください。

これで右キーと左キーを押したら移動するようになります。
ただし長押しに対応していないので、Rxを使ってその辺も組み込むといいかもしれません。
あるいはサンプルに書いてある通りvelocityを実装すれば長押しと同等のことはできます。

終わりに

今回はスプライトの移動について取り扱いました。
このへんはツクールMVが色々とうまいこと実装してくれいるので、そちらを使うのが楽だよなあ……と思ってしまいました。
オレオレライブラリの実装は嫌なので、なにかスプライトの移動のデファクトスタンダードとなっているライブラリを探すのもよいのかも……?
あるか知りませんがw

ほなそんな感じでまた。

フォローする