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

プロローグ

前回のものをもう一回見直して、コードを綺麗に整理しないとここにアップしないと決めました。まだまだ未熟なので、説明うまく伝えないところ、間違ってるところあれば、いつでもご指導頂ければ嬉しいです。
宜しくお願いいたします。

出処

kittykatattackさんのチュートリアルを勉強した上に

GitHub - kittykatattack/learningPixi: A step-by-step introduction to making games and interactive media with the Pixi.js rendering engine.

Christopher Calebさんのチュートリアルを参照しながら作ってみたものになります。

Building a Parallax Scroller with Pixi.js: Part 1

Part 1

Ch01 基本構造

Htmlを用意する

<!doctype html>
<meta charset="utf-8">
<title>Pixi.js　チュートリアル日本語版</title>
<body>
<script src="../pixi.js/bin/pixi.js"></script>
<script>
  // コードをここに書く
</script>
<canvas id="game-canvas" width="512" height="384"></canvas>
</body>

Canvasを追加する

function init(){

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

  // コンテナの内容をレンダラーに伝える
  renderer.render(stage);

}
window.onload = init;

一枚目の画像を追加する

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

  // 一枚の画像を読み込む、読み込んだらsetup function起動する
  PIXI.loader.add("images/bg-far.png")
      .load(setup);

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

    // 一枚目の画像をコンテナに突っ込む
    var far = new PIXI.Sprite(PIXI.loader.resources["images/bg-far.png"].texture);
    stage.addChild(far);

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

}
window.onload = init;

二枚目の画像を追加する

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

  // 二枚の画像を読み込む、読み込んだらsetup function起動する
  PIXI.loader.add(["images/bg-far.png", "images/bg-mid.png"])
      .load(setup);

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

    // 一枚目の画像をコンテナに突っ込む
    var far = new PIXI.Sprite(PIXI.loader.resources["images/bg-far.png"].texture);
    stage.addChild(far);

    // 二枚目の画像をコンテナに突っ込む
    var mid = new PIXI.Sprite(PIXI.loader.resources["images/bg-mid.png"].texture);
    // 二枚目の画像の位置を調整する
    mid.y = 128;
    stage.addChild(mid);

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

一方通行のアニメーション付ける

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

  // 二枚の画像を読み込む、読み込んだらsetup function起動する
  PIXI.loader.add(["images/bg-far.png", "images/bg-mid.png"])
      .load(setup);

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

    // 一枚目の画像をコンテナに突っ込む（ここのvarを取る）
    far = new PIXI.Sprite(PIXI.loader.resources["images/bg-far.png"].texture);
    stage.addChild(far);

    // 二枚目の画像をコンテナに突っ込む（ここのvarを取る）
    mid = new PIXI.Sprite(PIXI.loader.resources["images/bg-mid.png"].texture);
    mid.y = 128;
    stage.addChild(mid);

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

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

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

    // 画像を左へずらす
    far.x -= 0.128;
    mid.x -= 0.64;

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

    requestAnimationFrame(update);
  }
}
window.onload = init;

画像の読み込み方法をタイルに変えて、無限アニメーション完成させる

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

  // loaderからの読み込み方法を廃棄、よってsetup functionも廃棄

  // // 二枚の画像を読み込む、読み込んだらsetup function起動する
  // PIXI.loader.add(["images/bg-far.png", "images/bg-mid.png"])
  //     .load(setup);

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

  //   // 一枚目の画像をコンテナに突っ込む（ここのvarを取る）
  //   far = new PIXI.Sprite(PIXI.loader.resources["images/bg-far.png"].texture);
  //   stage.addChild(far);

  //   // 二枚目の画像をコンテナに突っ込む（ここのvarを取る）
  //   mid = new PIXI.Sprite(PIXI.loader.resources["images/bg-mid.png"].texture);
  //   mid.y = 128;
  //   stage.addChild(mid);

  //   // コンテナの内容をレンダラーに伝える（update functionへ移動）
  //   // renderer.render(stage);

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


  // 画像を読み込む
  var farTexture = PIXI.Texture.fromImage("images/bg-far.png");
  // タイル貼る範囲を指定する
  far = new PIXI.extras.TilingSprite(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.x -= 0.128;
    // mid.x -= 0.64;

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

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

    requestAnimationFrame(update);
  }
}


window.onload = init;

エピローグ

前回と違い、書き方ちょっと変えました。コメントアウトで説明文入れるようにしています。そして、このステップの中で削除したいコードをコメントアウトし、追加するコード入れてます。また、コメントアウトしたコード次回削除するという仕組みです。

前後のコードを見比べる必要があります。
分かりにくくなったのか、分かりやすくなってのか、よく分かりません。いったん試しにこういう方法でいきます。ほかに良い方法あれば教えて頂けたら幸いです。またもし誤っている箇所を見つけた場合はご遠慮なくご指摘下さい。宜しくお願い致します。

では、また次回に。