Getting started with PixiJS - Hello World

ツクールMVの描画処理はどうなっているのかとソースを読んでみたけど、まったく分からないので、一旦ツクールMVのことは忘れて、ツクールMVで使っているPixiJSのことを基礎から学ぶことにした。ツクールMVのSpriteとかPIXIのクラスを継承しているので、描画まわりはPixiJSが鍵を握っているような気がする。

 

www.pixijs.com

チュートリアルの初手でつまづいた。サンプルのHello Worldを動かしてみても真っ白な画面が表示されるだけで何も起こらない。コンソールにはピンクの何かが出力されているので動いていないということはないと思うのだけど。

 

よく分からないので、稼働実績のあるツクールMVのlibをPixiのチュートリアルフォルダに突っ込んで参照を書き換えて動かしてみる。相変わらず真っ白。ピンクのあいつは出てる。Hello Worldすらこなせないとは・・・

f:id:fujiyamahanbun:20200113132919p:plain

ピンクのあいつ

まったく分からないので、どこでひっかかっているのか調べるためPixi.jsのsayHelloの中を覗いてみる。なんか “window.console.log.apply(console, args);” と書かれている。あれ?もしかしてコンソールに出力されていたピンクのあいつを出すだけなのか?

 

Chromeデベロッパーツールでデバッグ。ステップ実行してみる。

コンソールにピンクのあいつを出力して、saidHelloにtrueを設定して、終了。

どうやらピンクのあいつをコンソールに出力するのがPixiJSのHello Worldだったようだ。ブラウザに大きく”Hello World”とか出力されるものだと思い込んでいた。

 

ともかくHello Worldをこなすことが出来た。というか最初からこなせていたが、こなせていたことに気づいていなかった。こんなことあるのか。PixiJSこわい。