phina.jsで簡単に背景スクロールができるTiledSpriteクラスつくった #JavaScript

アクションゲーム・STG制作の際など背景をスクロールしたいことがままあります。

背景スクロールを表現する方法として、例えば横方向にスクロールしたい時は2枚のスプライトを継ぎ目なく並べてスクロール方向に移動させ、適当なタイミング（画面外に出た等）で位置をリセットする方法が一般的です。

ただコードをシンプルにするのが難しく、またスクロール方向が1方向のみに限られるという欠点があります。

そこでもう少しシンプル、かつどのスクロール方向にも対応した方法を考えた結果、TiledSpriteクラスが生まれました。

使い方

自前の魔改造phina.jsを読み込めばすぐ使えます。（気が向いたら本家に取り込んでもらえるようPRする…かも…）
（上のコードをコピペして適当に宣言してもOK）

<script src="https://cdn.jsdelivr.net/gh/pentamania/phina.js@chimera/build/phina.min.js" type="text/javascript" charset="utf-8"></script>

TiledSpriteのインスタンス生成方法は普通のSpriteクラスとほぼ一緒です。
何もいじってないときは見た目も変わりません。

TiledSprite("background") // globalizeしてない場合は phina.display.TiledSprite("background")
  .setPosition(gx.center(), gy.center())
  .addChildTo(this);

しかし内部的にはCanvasPatternを使って描画を行ってます。
さらにoffsetX（Y）というプロパティ（厳密に言えばアクセサ）があり、この値を変えて描画範囲をずらすと、ズレた分がリピートしていることが分かります。

リピートすることを利用し、offset値に毎フレーム加算を行うとスクロールしているように見せることができます。

TiledSprite("background")
  .setPosition(gx.center(), gy.center())
  .addChildTo(this)
  .on('enterframe', function() {
    // 毎フレーム行う処理
    this.offsetX += 10;
    this.offsetY += 2;
  });

実際に動くサンプル

加算じゃなくて減算すればスクロール方向を逆にすることもできます。

参考

着想自体はPixi.jsのTilingSpriteから得ました。コード内容もけっこう参考にしてます。（WebGLモードのみの機能かと思いきや、Canvas2Dモードでもできたので驚いた）