読者です 読者をやめる 読者になる 読者になる

manmanrai’s diary

新米フロントエンジニアの勉強記録ブログ

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

プロローグ

前回はFarとMidを独立させて、update functionも各自持たせるように変えました。
次はScroller functionを作って、FarとMidを配下に入れて、コントロール権をScrollerに持たせます。

Part2(続き)

Ch03 動作メソッド化

Scrollerに任せる

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);

  // 画像をまとめて呼び出す
  scroller = new Scroller(stage);

  requestAnimationFrame(update);


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

    // 組み合わせたタイルを左へずらす
    scroller.update();
    // far.update();
    // mid.update();

   // コンテナの内容をレンダラーに伝える(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;
};


// farとmid二枚画像をまとめる
function Scroller(stage){
  this.far = new Far();
  stage.addChild(this.far);

  this.mid = new Mid();
  stage.addChild(this.mid);
}
// updateもまとめる
Scroller.prototype.update = function(){
  this.far.update();
  this.mid.update();
}

window.onload = init;
続きを読む

【新】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;
続きを読む

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

プロローグ

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

出処

Pixi.js公式サイトがお薦めのチュートリアル

Tutorials - PixiJS v4

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

続きを読む

Pixi.js でパララックススクローラーを作ってみる【反省】

反省

チュートリアルを見ながら作ってましたが、理解間違ってるところあるじゃないかなと思って、part1から勉強し直しました。
そして、やっぱりミスを発見しました。


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

を改造しながら、勉強したいと思ってました。


しかし、中途半端な理解で新しいことを取り込もうとしたら、あまりきれいじゃないコード書いちゃって、間違ってるコードもありました。
普通に動作はしますが、余計なものも入ってました。しかもブログで公開しちゃいました。 チュートリアルとしては一番やっちゃいけないことをやってしまいました。 ご迷惑をかけてしまって、誠に申し訳ございません。

今できることは、 このシリーズの全コードも見直し、もう一回正しいコードを公開したいと思います。既に前に公開したコードを読んだ方、申し訳ないのですが、一緒にコードを見直していきましょう。

「実用数学技能検定準2級」合格しました。

お恥ずかしいですが、既に社会人にもなった今数学検定を初めて受けて、そして、受かりました。

www.su-gaku.net

特に何の目的もなく取ったのですが、でも5月8日0時過ぎた後に公式ホームページで合否を確認する時かなりドキドキしていて、合格を見た時にも少しテンション上がりました。いい大人ですけど。笑

今回の準2級は高校生一年生のレベルだそうです。
東京ビッグサイトで試験受けた時、準2級と2級を受ける人(個人受験)が少ないみたいで、同じ教室で受けていました。どちらも大半以上は普通の高校生たちが受けてますが、その中でも社会人の姿もいました。

検定マニアの鈴木さんのブログには準1級についてそう語ってました。
(コメント欄も面白かったです。)

blog.kentei-uketsuke.com

自分はテストの1次と2次の合間にビックサイトのカフェでパスタを食べながらこの記事を読んでました。検定を趣味にするのなんか面白いですね。何年か前にもテレビで見たことがありましたね。今は本書いてらっしゃるようです。今度本屋さん行ったら見てみようかな。

今度もう一個上のレベルを受けてみたいです。