Getting started with PixiJS - Hello World 後

Hello Worldをこなしてすぐに”Make a sprite from an image”でつまづく。
ソースを見たところ猫の絵を出力するように思えたけど、画面はまっくろ。
コンソールには以下のようなエラーが出力されている。

Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.

検索かけてみて”img”タグにcrossorigin=”anonymous”を書かないとダメだぞみたいなものを見かけたけど、そもそも”img”タグを使ってない。Pixi.jsを”cross”で検索かけてみるとloader.addのサンプルが見つかる。crossOriginてのを設定すればいいのかな？

PIXI.loader
  .add({ url: ‘images/cat.png’, crossOrigin: true})
  .load(setup);

変更してみるも別のエラーが出るようになった。

Access to image at 'file:///C:/learningPixi-master/examples/images/cat.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

よく分からないけどローカルのファイルにアクセスできないみたいなエラーじゃないかなーと思ったので、ローカルサーバーを立てて動かしてみたら動いた。ローカルサーバーを立てる際には次の記事を参考にした。
qiita.com
「Windows アプリ編」の『簡単WEBサーバー』と『04WebServer』を試し、『04WebServer』を採用。
ディレクトリ設定 > ドキュメントルートと選択し [ServerPath] を "/"、[LocalPath] を "C:\Web\" とした後に、画面左上の [サーバ再起動] を実行すれば準備完了。
"C:\Web\Game1\Index.html" を動かしたければ、ブラウザのアドレスに "localhost:8080/Game1/" と入力すれば良いだけ。お手軽。
オリジンが何かが少し気になったので検索。次の記事によると
qiita.com

リソースのURLのうち「スキーム、ホスト、ポート」の組み合わせをオリジンと呼ぶ。

とのこと。他にもCORSとは何かといった説明もあったので一読したけど動いたからもういいか。
なんにせよ左上に猫の画像が表示されるようになった。ソースを元の状態に戻しても動いたので、最初にやった crossOrigin: true の追記には意味がなかったようだ。

ローカルサーバーで動かすようにしてからはサクサク進んだ。ソースを読んで結果を見て、少し手を加えて変化を見てという感じですぐに終わった。チュートリアル1が終わったので次はチュートリアル2をこなすことになるのだけど、その前にやってみたいことが出来たのでそちらを先にこなすことにした。チュートリアル1のミニゲームのキャラクターをツクールMVの Input を使って動かしてみたくなった。また、斜め移動できるようにもしてみたい。

17_treasureHunter.html に手を加える。まず、キー操作に関わる部分を消して自機を操作できなくなったことを確認。次にツクールMVの rpg_core.js を読み込ませる。

SyntaxError: Identifier 'Graphics' has already been declared
    at c:\www\PIXI_MVInput\index.html:9:10

今回は Input 以外使わないので、Input 以外のクラスを削除した rpg_core_input.js を用意してそちらを読ませることにする。すると今度は Util や ResourceHandler がないと言われたので、Util を使っている関数 Input._wrapNwjsAlert を削る。こいつが何をやっているのかは知らないし、今は調べない。とにかくキャラクターをキーボードで動かしたいだけなので削る。

そして ResourceHandler を削るついでに Input._onKeyDown と Input._onKeyUp から今回必要な構成以外を削る。

Input._onKeyDown = function(event) {
    if (this._shouldPreventDefault(event.keyCode)) {
        event.preventDefault();
    }
    var buttonName = this.keyMapper[event.keyCode];
    this._currentState[buttonName] = true;
};

Input._onKeyUp = function(event) {
    var buttonName = this.keyMapper[event.keyCode];
    this._currentState[buttonName] = false;
};

event.preventDefault() を削ると、キーボード操作に合わせて画面がスクロールするようになってしまったので元に戻した。

次は下記コードをミニゲームの play(delta) で explorer の座標を更新する前に書いてみる。

  explorer.vx = 0;
  explorer.vy = 0;
  if (Input.isPressed('left')) explorer.vx -=5;
  if (Input.isPressed('right')) explorer.vx +=5;
  if (Input.isPressed('up')) explorer.vy -=5;
  if (Input.isPressed('down')) explorer.vy +=5;

以下のエラーが出た。

TypeError: Cannot read property 'left' of undefined

初期化されていない変数を読んだからダメってことらしい。
setup() の中の state = play; の手前で Input.initialize() を実行するようにしてみたら動いた。斜めにも動かせる。

Input を眺めていると今回書いた 6 行と同じようなことを Input._signX と _signY で行っていた。
これらの関数を使えば 2 行で書けるけど、@private というコメントが目についたので、外から呼ばれることを想定していないと判断して使うのをやめた。関数名の先頭にアンダーバーがついているのは private 変数や関数にはアンダーバーをつけるというコーディング規約に則っているためと推察される。”JavaScript” “コーディング規約” で検索すると次の記事が見つかったのでたぶん合ってる。
qiita.com
さて、とりあえず動いたけど今度は AWSD でも動かせるようにしてみたくなった。
Input.keyMapper をちょちょいと書き換えればいいはず。

    65: 'left',     // A
    83: 'down',     // S
    68: 'right',    // D
    87: 'up',       // W

ASDW でも動かせるようになった。
もうゲーム作れそうな気がしてきたからチュートリアルやめよ。