Google

2016年11月3日木曜日

PixiJSの描画サイクルと更新

前回は初心者向け講座等でお馴染みのHello Wolrd!を作ってみました。
PixiJSの描画基礎をまとめ直すとこうなります。
  • コンテナを作って描画したいオブジェクト(画像、文字)をぶら下げる
  • レンダラを作ってメンバのviewをタグの中にぶら下げる
  • レンダラにコンテナを全て描画するように依頼
前回のHello Worldでは単に描画してオシマイでした。
今回はこれをゲームやアニメの効果っぽく動かします。

そもそも人の目から見て動いているように見えるのは、情報が連続して更新され残像が見えるためであってCanvasに限った話ではありません。
ゲームのようにアニメーション(ここでは動くとか変わるという意味)をさせたいのであれば、再描画のタイミング毎に消して書き換える必要があります。

原始的なアニメーションの例
しかし消したり書いたりといった処理の殆どはCanvasやPixiが担当するので気にする必要はありません。
プログラマ側は変更処理だけで済み、メイン処理に注力できる訳です。

その具体例がこちら。
前回のHello World!改造し、文字が動くだけのデモです。

解りにくいのですが、文字が右に流れます
デモのURLはこちら。
http://angework.com/pub/PixiJS/index2.html

そしてソースコードがこちら。


前回から増えたのは大雑把に言うと2つです。
  1. コンテナやレンダラ等を変数として外に出して明示化
  2. アニメーション処理関数を追加
前者は何度も描画を繰り返す際に使用するためにグローバルにしました。

使っている変数3つを外に出しました。こうしなくても動きますが横着はいずれ自分の首を締めます。
この規模ならvar宣言が無くても問題なく動きますが、綺麗に書く癖は付けた方が良いでしょう。

後者が再描画に関するキモ。anmate()関数です。


テキストのX位置が幅を超えたら戻すという処理が18-22行目。
全ての描画対象は座標情報を持っており、初期値はxもyも0です。この値は19行目のようにプロパティとして取り出したりセットしたりできるので、この値で判断が行います。
そして前回ど同一のコンテナ再描画命令が24行目。

そして26行目でrequestAnimationFrame()というメソッドを使っています。
これはHTML5で追加された機能で、再描画の直前のタイミングで指定した関数をコールしてくれるという代物。
この引数には関数名の括弧抜きで渡して下さい。
今回はanimate()という関数があるのでanimateという関数名だけを渡しています。
ちなみに再描画タイミングはハード依存なので、フレームレート重視のゲーム等では工夫が必要です。


このサイクルを言葉でまとめてみました。
この2つが理解できればPixiでアニメーションする単純な処理は殆ど書けるでしょう。

初期化:
  • コンテナを作って描画したいオブジェクト(画像、文字)をぶら下げる
  • レンダラを作ってメンバのviewをタグの中にぶら下げる
    • 実質、PixiがCanvasタグを生成してタグに紐付ける事になる
再描画サイクル:
  • 位置の変更など、次のフレームで変更する内容を処理
  • レンダラにコンテナを全て描画するように依頼
  • 次の再描画直前にまたこの処理を読んでもらう

位置が動くだけの場合、オブジェクトの位置を変更するだけで勝手にPixiが処理をしてくれます。
キャラが歩くのなら毎回画像を差し替えなければなりません。


更に理解を深めるための実験方法も出してみます。

おさらい確認実験

26行目のrequestAnimationFrameをコメントアウトすると、前回と代わりません。
つまり位置が変わっても再描画をしていないことが解ります。
また、42行目のanimate();をコメントアウトすると、描画サイクルが始まらないので文字自体が出ません。
38行目の文字オブジェクトは空文字""でも生成可能です。何も出ないのでツマラナイですが、エラーではない正常な処理です。


今回も地味でした。
次回は画像の描画処理を書くので少し派手になります。

0 件のコメント:

コメントを投稿