Google

2016年10月31日月曜日

PixiJSでHelloWorldを細かく解説

前回は能書きだけでしたので、今回は初心に戻りPixiJSでHello World!サンプルを書いてみます。
フレームワークはPixiJSのv4とJQueryを適用する前提で進めて行きます。
ちなみにJQueryはバージョン依存コードを書かないため、v1でもv2系統でも構いません。

PixiJSの最新版は以下からダウンロード可能です。

GitHub
https://github.com/pixijs/pixi.js

しかしここからzipをダウンロードして解凍して云々、、等という作業自体を読んだ方に強制するのも説明するのも面倒なので、まずはそれが不要な1枚ぺらのコードにしてみました。
そのHelloWorldのコードがこちらです。
HTMLと合わせるとここまで長くなってしまいますが仕方ありません。

以下が実行結果のスクリーンショット。
この黒地に白文字という古風な画面がPixiで描画した領域です。

HelloWorldなので画面がつまらないのですがご勘弁を

実際の描画処理を確認するにはこちらからどうぞ。

 Pixi Hello World! Test (ANGEWORKの実験公開ページへ移動)

では、このコードについて各行順を追って説明して行きます。
HTMLにはpixiというidのDIVタグのみが存在しています。
それ以外の部分は普通のHTMLで、PixiとJqueryをロードしてるだけです。


今回の本体はJavaScriptの中です。
JQueryのロード完了イベント時にPixiを初期化するのが16行目から。


最新版ではコンテナとレンダラーの2つがあれば殆どの描画が行えるような構成になっていますのでシンプルです。
Pixiは既にv4のため、旧バージョンとは生成方法に多少の違いがある点に注意して下さい。
ちなみにこのコンテナは簡単に言うと枝葉の入れ子構造になっており、描画したい画像や文字をぶら下げる根元の役割をします。

Pixi.Container ドキュメント(英語)

そして描画担当のレンダラクラス。
レンダラにはviewというCanvasオブジェクトが1つ紐付けられており、このサンプルではこれをpixiというidのタグにJQueryを使用してぶら下げています。

ちなみに今回のようにrenderer.viewをぶら下げると、、、

bodyの下にpixiというタグしかなかったDOM構成が、、、

実行時にこうなります。
CanvasRenderer生成コードと同じ200 x 100のcanvasタグが自動で追加されました。
このレンダラは2D/3D/オプションなどで生成方法を書き分けることがあります。
ちなみに今回使用したCanvasレンダラは2Dの描画を担当するクラスです。

Pixi.CanvasRendererドキュメント(英語)

レンダラには種類があり、3D用のWebGLRenderer、2D/3D両対応のautoDetectRenderernも存在します。
よそ様のコードではautoDetectRendererが多いのですが、CanvasRendererでの初期化コードが少なかったのでこちらにしてみました。
そして引数に何も指定しないとコンテナは真っ黒に塗りつぶされてしまいます。

続いてようやくHello World!の文字生成が21行目から。


ベースが黒地なので白い文字、フォントはArialで生成してみました。
そして生成した文字オブジェクトはコンテナの子供としてぶら下げる必要があります。
しかしそれだけでは描画には至りません。それを変えるのが次のコード。


26行目。コンテナにぶら下がるもの全てをここで描画することになります。
このサンプルでは白文字のHello World!が入っているため単体描画となりますが、背景入れたり装飾入れたり優先順位変えたりとなるのはお察しできるのではないかと。

解説はこれで完了です。お疲れ様でした。

コードばかりの記になってしまいました。
次は描画サイクルについて記載させて頂く予定です。

0 件のコメント:

コメントを投稿