Pixi.js でパララックススクローラーを作ってみる【第二回】

前回の話

前回は二枚の画像を重ねさせ、動かしました。
今回はそれの進化型です。

Building a Parallax Scroller with Pixi.js: Part 2

構造の理解

前回に出てきた二種類スプライト、スプライトとタイリングスプライトなんですが、どちらもwidth, height, alpha, positionなどの設定できます。しかもどちらもaddChild function使って、containerの中に簡単に入れることできます。

承継（しょうけい）のルール通用しますので、それがこんな感じで引き継ぐらしいです。

承継を利用したプロトタイプ作成

前回tilingSpriteを作る時何回も重複したコードは：

// 画像を読み込む
var farTexture = PIXI.Texture.fromImage("resources/bg-far.png");  

// タイリングスプライトとして貼り付ける
far = new PIXI.extras.TilingSprite(farTexture, 512, 256);

// タイリングスプライトの位置を決める
far.position.x = 0;
far.position.y = 0;

// タイルを貼る位置を決める
far.tilePosition.x = 0;
far.tilePosition.y = 0;

// コンテナに追加する
stage.addChild(far);

という流れでした。 この流れをプロトタイプとして、カスタマイズできるように独立させ

far = new Far();
stage.addChild(far);

これが今回の目標です。

スタート

まず、function Farを作成します。

function Far(texture, width, height) {
  PIXI.extras.TilingSprite.call(this, texture, width, height);
}

そして、このfunction Farの次に原型（どこから引き継いて来たなのか）を表記します。

Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);

それでsetupの中身をこういう風に書き換えられます。

  var farTexture = PIXI.Texture.fromImage("resources/bg-far.png");

  // far = new PIXI.extras.TilingSprite(farTexture, 512, 256);
  far = new Far(farTexture, 512, 256);

  far.position.x = 0;
  far.position.y = 0;
  far.tilePosition.x = 0;
  far.tilePosition.y = 0;
  stage.addChild(far);

次は位置の設定もfunction Farに入れときます。

function Far(texture, width, height) {
  PIXI.extras.TilingSprite.call(this, texture, width, height);

  this.position.x = 0;
  this.position.y = 0;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}

そうしたら、

  var farTexture = PIXI.Texture.fromImage("resources/bg-far.png");

  // far = new PIXI.extras.TilingSprite(farTexture, 512, 256);
  far = new Far(farTexture, 512, 256);

  // far.position.x = 0;
  // far.position.y = 0;
  // far.tilePosition.x = 0;
  // far.tilePosition.y = 0;
  stage.addChild(far);

コメントアウトした部分もいらないので、setupの中で3行で終わらせます。
最後に、このfarプロトタイプはbg-far.pngを呼び出すために存在するので、いっそう最初の読み込み入れれば良いです。
widthとheightも同時に指定します。

function Far(texture, width, height) {
  var texture = PIXI.Texture.fromImage("resources/bg-far.png");
  PIXI.extras.TilingSprite.call(this, texture,512, 256));

  this.position.x = 0;
  this.position.y = 0;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}

で、setup内に はこうなります。

  far = new Far();
  stage.addChild(far);

farを設置するコードは2行で済ませました。
次はmidにも同じようなことを。

function Mid() {
  var texture = PIXI.Texture.fromImage("resources/bg-mid.png");
  PIXI.extras.TilingSprite.call(this, texture, 512, 256);

  this.position.x = 0;
  this.position.y = 128;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}

Mid.prototype = Object.create(PIXI.extras.TilingSprite.prototype);

setup function：

mid = new Mid();
stage.addChild(mid);

そして、update function内のコードもまとめて整理しましょう。

function update(){
  far.tilePosition.x -= 0.128;
  mid.tilePosition.x -= 0.64;

  renderer.render(stage);
  requestAnimationFrame(update);
}

そこのtilePositionをfunction Farの原型のところに追加します。

function Far(){
  // ここ省略します。
}
Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);
Far.prototype.update = function() {
  this.tilePosition.x -= 0.128;
};

midにも同じ作業書き換えます。

最後の本体のupdate functionはこうなります。

function update() {
  far.update();
  mid.update();

  renderer.render(stage);

  requestAnimFrame(update);
}

動作確認してみたら、動き大丈夫そうですね。 チュートリアルのpart2意外に長くなりそうなので、一旦ここで切らせていただきます。
では、また次回にで。