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

はいどーも以下略。
参考サイトはこれ。
https://github.com/kittykatattack/learningPixi

現在読み込み中のファイルを知る

PIXI.loaderを使ってファイルを読み込めることは前回わかりました。
ですが「今どのファイルを読み込んでいるのか」を知りたい場合があるかもしれません。
そんなときに役立つのがprogressイベントです。
具体的な使い方はこんな感じ。

./images/omesis.png
sample1.js:23 読み込み率:33.333333333333336%
sample1.js:22 ./images/streamdog.jpg
sample1.js:23 読み込み率:66.66666666666667%
sample1.js:22 ./images/unko.png
sample1.js:23 読み込み率:100%

これを使えば「Now Loading… 30%」みたいな表現もちょちょいのちょいでできるというわけですね。
なおloadは全てのファイルの読み込みが済んでから呼ばれます。

音を流してみる

なんか飽きてきたので横道にそれて音を流してみましょう。
まずは以下のURLから「pixi-sound.js」を落としてきます。
https://github.com/pixijs/pixi-sound/releases

で、htmlファイルの方に

を追加しておきます。

あとはsample1.jsに戻って、音を再生するコードを書けばよいだけです。
例えば以下のような感じ(音声ファイルを用意する必要があります)。

これだけで音が再生されます。
ドキュメントを斜め読みした感じ、再生の終了を検知したり、プリロードしたりもできるっぽいです。
どのシーンでも使いそうなSEはプリロードしておいて、BGMは必要になったら再生とか多いんじゃないですかね知らんけど。
ループや再生速度の設定など、一般的に欲しそうな機能は揃っているかな? と思いました。
ただフェードアウトとかフェードインはなさそう? なので自分で組む必要があるかもしれません。
誰かがいい感じのオレオレライブラリ作ってくれてませんかね……w

API等についてはこのサイトに色々載ってます。
https://pixijs.io/pixi-sound/examples/index.html

スプライトの位置をずらして表示

次はスプライトの位置をずらして表示させてみます。
まずは以下の関数を作成。

そしてclickイベントを以下のように変更します。

最後の行でcreateStreamDog関数を呼んでいますね。
これで犬の画像が左上からずれた箇所に表示されるようになります。
しかし僕が使っている犬の画像は大きいので、描画領域に収まりきりません。
なので小さくしてみます。

一行追加されただけですね。
sprite.scale.setは幅と高さの大きさを受け取ります(1が100%で0.5が50%)。
今回だと30%まで縮めたことになります。

クリックのたびに回転させる

今度は犬の画像をクリックのたびに回転させてみましょう。
コードをドン。

アンカーを画像の中心に変えています。
これは左上が画像の原点に設定されていると、回転のたびに画像の座標がずれてしまうからです。
で、あとはクリックイベントハンドラーを登録すればOKです。rotationを加算している部分ですね。
これだけで回転してくれます。
まあ簡単。

終わりに

今回はあんまりいい感じの情報が得られませんでしたが、次の項目はtilesetっぽいです。
これは楽しみですね。

ほなそんな感じでまた。

フォローする