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

pixi.js

プロローグ

前回は画像を貼って、アニメーションまで完結しました。
これからの第二回と第三回はコードのメソッド化していきます。

Part 2

Ch02 画像メソッド化

Far functionにを作る

function init(){
  // レンダラーのサイズを指定する、コンテナ（枠）を作る
  var renderer = PIXI.autoDetectRenderer(512, 384, {view:document.getElementById("game-canvas")}),
      stage = new PIXI.Container();


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

  // タイル貼る範囲を指定する
  // far = new PIXI.extras.TilingSprite(farTexture, 512, 256);
  far = new Far(farTexture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  far.x = 0;
  far.y = 0;
  far.tilePosition.x = 0;
  far.tilePosition.y = 0;

  stage.addChild(far);


  // 画像を読み込む
  var midTexture = PIXI.Texture.fromImage("images/bg-mid.png");
  // タイル貼る範囲を指定する
  mid = new PIXI.extras.TilingSprite(midTexture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  mid.x = 0;
  mid.y = 128;
  mid.tilePosition.x = 0;
  mid.tilePosition.y = 0;

  stage.addChild(mid);

  requestAnimationFrame(update);


  // update functionの中身
  function update(){

    // 組み合わせたタイルを左へずらす
    far.tilePosition.x -= 0.128;
    mid.tilePosition.x -= 0.64;

  　// コンテナの内容をレンダラーに伝える（setup functionから持ってくる）
    renderer.render(stage);

    requestAnimationFrame(update);
  }
}



// Far画像を独立させる
function Far(texture, width, height) {
  PIXI.extras.TilingSprite.call(this, texture, width, height);
}
Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);

window.onload = init;

far画像に対しての指定をFar functionの中へ

function init(){
  // レンダラーのサイズを指定する、コンテナ（枠）を作る
  var renderer = PIXI.autoDetectRenderer(512, 384, {view:document.getElementById("game-canvas")}),
      stage = new PIXI.Container();


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

  // タイル貼る範囲を指定する
  // far = new PIXI.extras.TilingSprite(farTexture, 512, 256);
  far = new Far(farTexture, 512, 256);

  // 位置を指定（全てのデフォルトは0）Far functionへ移動
  // far.x = 0;
  // far.y = 0;
  // far.tilePosition.x = 0;
  // far.tilePosition.y = 0;

  stage.addChild(far);


  // 画像を読み込む
  var midTexture = PIXI.Texture.fromImage("images/bg-mid.png");
  // タイル貼る範囲を指定する
  mid = new PIXI.extras.TilingSprite(midTexture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  mid.x = 0;
  mid.y = 128;
  mid.tilePosition.x = 0;
  mid.tilePosition.y = 0;

  stage.addChild(mid);

  requestAnimationFrame(update);


  // update functionの中身
  function update(){

    // 組み合わせたタイルを左へずらす
    far.tilePosition.x -= 0.128;
    mid.tilePosition.x -= 0.64;

  　// コンテナの内容をレンダラーに伝える（setup functionから持ってくる）
    renderer.render(stage);

    requestAnimationFrame(update);
  }
}



// Far画像を独立させる
function Far(texture, width, height) {
  PIXI.extras.TilingSprite.call(this, texture, width, height);

  // 位置を指定（全てのデフォルトは0）
  this.x = 0;
  this.y = 0;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}
Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);

window.onload = init;

far画像のパスもFar functionの中へ

function init(){
  // レンダラーのサイズを指定する、コンテナ（枠）を作る
  var renderer = PIXI.autoDetectRenderer(512, 384, {view:document.getElementById("game-canvas")}),
      stage = new PIXI.Container();


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

  // タイルとして読み込む（Far function使用）
  // パラメーター削除
  far = new Far();
  stage.addChild(far);


  // 画像を読み込む
  var midTexture = PIXI.Texture.fromImage("images/bg-mid.png");
  // タイル貼る範囲を指定する
  mid = new PIXI.extras.TilingSprite(midTexture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  mid.x = 0;
  mid.y = 128;
  mid.tilePosition.x = 0;
  mid.tilePosition.y = 0;

  stage.addChild(mid);

  requestAnimationFrame(update);


  // update functionの中身
  function update(){

    // 組み合わせたタイルを左へずらす
    far.tilePosition.x -= 0.128;
    mid.tilePosition.x -= 0.64;

  　// コンテナの内容をレンダラーに伝える（setup functionから持ってくる）
    renderer.render(stage);

    // 描画処理を繰り返しupdate functionを実行する
    requestAnimationFrame(update);
  }
}


// Far画像を独立させる
// パラメーター削除
function Far() {

  // 画像を読み込む、textureという名で
  var texture = PIXI.Texture.fromImage("images/bg-far.png");

  // タイル貼る範囲を指定する
  PIXI.extras.TilingSprite.call(this, texture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  this.x = 0;
  this.y = 0;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}
Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);

window.onload = init;

midも同じ手順で書き換え

function init(){
  // レンダラーのサイズを指定する、コンテナ（枠）を作る
  var renderer = PIXI.autoDetectRenderer(512, 384, {view:document.getElementById("game-canvas")}),
      stage = new PIXI.Container();

  // 画像を呼び出す（Far function使用）
  far = new Far();
  stage.addChild(far);

  // 画像を呼び出す（Mid function使用）
  mid = new Mid();
  stage.addChild(mid);

  requestAnimationFrame(update);


  // update functionの中身
  function update(){

    // 組み合わせたタイルを左へずらす
    far.tilePosition.x -= 0.128;
    mid.tilePosition.x -= 0.64;

  　// コンテナの内容をレンダラーに伝える（setup functionから持ってくる）
    renderer.render(stage);

    // 描画処理を繰り返しupdate functionを実行する
    requestAnimationFrame(update);
  }
}


// Far画像を独立させる
function Far() {

  // 画像を読み込む、textureという名で
  var texture = PIXI.Texture.fromImage("images/bg-far.png");

  // タイル貼る範囲を指定する
  PIXI.extras.TilingSprite.call(this, texture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  this.x = 0;
  this.y = 0;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}
Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);


// Mid画像を独立させる
function Mid() {

  // 画像を読み込む、textureという名で
  var texture = PIXI.Texture.fromImage("images/bg-mid.png");

  // タイル貼る範囲を指定する
  PIXI.extras.TilingSprite.call(this, texture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  this.x = 0;
  this.y = 128;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}
Mid.prototype = Object.create(PIXI.extras.TilingSprite.prototype);

window.onload = init;

update機能をMidとFarに持たせる

function init(){
  // レンダラーのサイズを指定する、コンテナ（枠）を作る
  var renderer = PIXI.autoDetectRenderer(512, 384, {view:document.getElementById("game-canvas")}),
      stage = new PIXI.Container();

  // 画像を呼び出す（Far function使用）
  far = new Far();
  stage.addChild(far);

  // 画像を呼び出す（Mid function使用）
  mid = new Mid();
  stage.addChild(mid);

  requestAnimationFrame(update);


  // update functionの中身
  function update(){

    // 組み合わせたタイルを左へずらす
    far.update();
    mid.update();
    // far.tilePosition.x -= 0.128;
    // mid.tilePosition.x -= 0.64;

  　// コンテナの内容をレンダラーに伝える（setup functionから持ってくる）
    renderer.render(stage);

    // 描画処理を繰り返しupdate functionを実行する
    requestAnimationFrame(update);
  }
}


// Far画像を独立させる
function Far() {

  // 画像を読み込む、textureという名で
  var texture = PIXI.Texture.fromImage("images/bg-far.png");

  // タイル貼る範囲を指定する
  PIXI.extras.TilingSprite.call(this, texture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  this.x = 0;
  this.y = 0;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}
Far.prototype = Object.create(PIXI.extras.TilingSprite.prototype);
// update function追加
Far.prototype.update = function() {
  this.tilePosition.x -= 0.128;
};

// Mid画像を独立させる
function Mid() {

  // 画像を読み込む、textureという名で
  var texture = PIXI.Texture.fromImage("images/bg-mid.png");

  // タイル貼る範囲を指定する
  PIXI.extras.TilingSprite.call(this, texture, 512, 256);

  // 位置を指定（全てのデフォルトは0）
  this.x = 0;
  this.y = 128;
  this.tilePosition.x = 0;
  this.tilePosition.y = 0;
}
Mid.prototype = Object.create(PIXI.extras.TilingSprite.prototype);
// update function追加
Mid.prototype.update = function() {
  this.tilePosition.x -= 0.64;
};

window.onload = init;

エピローグ

表示されてる部分あまり変化がないため、この部分ちょっと退屈かもしれません。
コードの整理がメインになってますが、第四回の時三枚目の画像いれることで、遊べることいっぱいあると思います。 それまで、もう少し辛抱を。（自分にもそう言い続けてます。笑）

ではまた次回に。