Google

2016年11月7日月曜日

PixiJSで画像表示の基礎

さて今回はPixiJSで画像の描画と移動までやってみます。

まず画像の読み込みです。
基本的な読み出し方はこう。

普通、画像はpng等を準備して表示するのでこのような形が実践に近いでしょう。

PIXI.Texture
https://pixijs.github.io/docs/PIXI.Texture.html
PIXI.Sprite
https://pixijs.github.io/docs/PIXI.Sprite.html

本家Pixiで使用してる小さなうさぎの画像を使うならこうします。

前回のHelloWorldにこれをいれたのが以下のアドレスです。

Pixi画像テスト

うさぎの後ろをHello Worldが流れていきます。
ワンテンポ遅れてうさぎの絵が出るのが確認できたでしょうか?
そのコードはこちら。
作成する側が必ず考えるべき事として、外部サーバに存在する画像の読み込みは内部の初期化と比較して非常に時間がかかるという点があります。
完了イベントを準備し、イベントの中で登録しないとエラーになるケースもあるのですが、遅延しても影響の無い造りになっています。

完了イベントを待って行儀よく処理をするならこうです。
本来なら全てを待ってから開始しなければなりませんし、余計なりソースをロードするとお客さんを無駄に待たせてしまいますので、これはローディング画面などを準備すべき部分でしょう。

移動は前回のテキストと原理や方法は全く同一です。
PIXI.TextはこのPIXI.Spriteから派生しており、メソッドやプロパティはそのまま使えます。

地味な記事が続きますが、次回は回転拡大縮小です。

0 件のコメント:

コメントを投稿