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

はいどーもこんにちはニートです。
本日はPixiJS v4の入門を始めたいと思います。
なんでPixiJSかと言えば、コイツがツクールMVで使われているんですね。
今までも多少は使っていましたが、きちんと覚えても損はないだろうというわけで勉強を始めた次第です。

このサイトを参考に進めていきますよ。
https://github.com/kittykatattack/learningPixi

PixiJSを手に入れる

PixiJSはGitHubで公開されています。
https://github.com/pixijs/pixi.js/releases
2018年8月20日現在、最新版というかアルファ版のv5が公開されていますね。
ただ今回はv4で行きたいと思うので、v4.8.0のpixi.min.jsを適当な作業フォルダに落としておきます。
これを読み込むだけでPixiJSが使えるという寸法ですね。

なおPixiJSを扱うにはHTMLとJavaScriptの知識が必要です。
どちらも全くわからないという場合はまずHTMLおよびJavaScirptの入門書を紐解くのがよいと思います。

なんか書いてみる
とりあえずサンプルをそのままコピペします。

以下の部分のURIは自分の環境に併せて変える必要があります。

では実行してみてください。
クロームを使用しているなら、開発ツールのコンソール画面に

PixiJS 4.8.0 – ✰ WebGL ✰ http://www.pixijs.com/ ♥♥♥

みたいなのが出ると思います。
出てなければ「pixi.min.js」のロードに失敗していますので、環境を見直してください。

さて以降はscriptタグの中にコードを書いていけばよいのですが、HTMLの中に直接JavaScriptのコードを書くのは個人的に好きでないので、sample1.jsというファイルを作成し、それを読み込むようにします。

こんな感じ。

以降はsample1.jsにコードを書き足していきます。

Pixi Application

まずは長方形の描画領域を作成してみます。
描画領域を作成するにはPIXI.Applicationというものを利用できます。
これはHTMLのcanvas要素を自動的に生成するものです。
こんな感じ。

これで画面に黒い領域が表示されるはずです。
PIXI.Applicationはコンストラクタいオブジェクトを受け取ることも可能です。
詳しくは以下のドキュメントをご覧ください。
http://pixijs.download/release/docs/PIXI.Application.html

また、生成後に変更することも可能なようです(ゲーム制作で使うかどうかは微妙な気がしましたが)。
こんな感じ。

Stage

PixiJSにはStageというものがあります。
これはCompositeパターンで作られたコンテナです。
この辺の話は以前『ウィンドウの下に画像を表示する方法【ツクールMV】』で書いたのでそちらを参照してください。

さてこのStageに何かを表示させるとき、Spriteが使えます。
このSpriteを使うには通常のイメージファイルをWebGLテクスチャに変換する必要があるようです。

注*WebGLテクスチャがなんやねんっちゅー話は僕はよくわかってませんw

ちゅーわけでこんな感じでロードしてみます。

注*ロードするにはサーバーをたててやる必要があります。あるいはFirefoxでも動きました。

これで「images/omesis.png」という画像が表示されます。

エイリアスの利用

画像を読み込むたびにPIXI.utils.TextureCacheと宣言してやるのはバカバカしいでしょう。
また、将来PixiJSのAPIが変化したとき、エイリアスをもともと使用していれば、利用者は全ての画像読み込み用のコードを変更するのではなく、単にエイリアスを変更するだけで済みます
というわけでエイリアスを用意します。

この一行をコードの頭近くに置くことで、画像の読み込みは以下のように短くできます。

さらに他のものについてもエイリアスを用意しましょう。
こんな感じ。

タッチに反応させる

これだけじゃあ「HTMLで画像表示させた方が早いだろボケ!」と言われかねないので、イベントドリブンな感じのアレをやってみます。

先ほど作ったcreateOmesisをこんな感じに変えてください。

これでおめシスの画像をクリックすると画像が消えると思います。
いやあ便利ですね!

終わりに

本日は導入から画像の表示までやってみました。
次回もガンガン進めていきたいと思いますよ。
ほなそんな感じでまた。

フォローする