2D WebGL renderer Pixi.js v4【連載第三回】

前回の話

スプライトを作る三つの方法の中の方法一と方法二、二つとも完結しました。
あと、方法三もJSONの部分を紹介しました。

三つの方法：

画像を使う（個別一個一個を読み込む）
プロジェクト内に使いたい全部の画像（sub-image）をまとめた大き画像（tileset）を使う（複数枚の画像を一枚にまとめるってこと）
JSON（texture atlas）内で大き画像（tileset）中の個々の画像（sub-image）のサイズと位置を指定する

今までずっと基礎の基礎の部分を理解しようとするだけで大変でした、ようやくここにたどり着いた感じです。
ここから楽しめるようになったらいいですな。

3. JSON（texture atlas）内で大き画像（tileset）中の個々の画像（sub-image）のサイズと位置を指定する全編

loaderに読み込んでもらうものを画像からJSONに替えます。

loader
  .add("images/treasureHunter.json")
  .load(setup);

JSON通じて、画像へアクセスし、スプライトを作成します。

var sprite = new Sprite(
  resources["images/treasureHunter.json"].textures["frameId.png"]
);

でもいちいちリソースからJSONを呼び出すの面倒なので、JSONを呼び出すまで別名を付けた方が便利です。
こう書き換えてみます。

var id = PIXI.loader.resources["images/treasureHunter.json"].textures; 

// JSON内書いてた名前入れると、他の画像も作れます。
let sprite = new Sprite(id["frameId.png"]);

はい、ここまではスプライトを入れる方法を説明しました。
次はスプライトを移動させることをチャレンジしてみたいと思います。

スプライトを移動してみる（アニメーション）

loaderの最後にsetupというfunctionを呼び出しますので、アニメーションもそのsetup functionに入れます。

var cat;

function setup() {
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.y = 96; 
  stage.addChild(cat);
 
  // アニメーションfunctionを呼び出す
  gameLoop();
}

function gameLoop(){

  //このfunctionを一秒内に60回実行する、loopする
  requestAnimationFrame(gameLoop);

  // ねこを右へ1pxつつずらす
  cat.x += 1;

  renderer.render(stage);
}

このコード通り実行したら、ねこちゃんが右へ一回だけ通過したのですが、限界設定しなかったため実はcanvasの境界を超えてずっと右へ進んでます。console.log()を入れれば見れると思います。

方向とスピードを変えてみよう

先ほどのコードを調整します。

var cat;

function setup() {
  cat = new Sprite(resources["images/cat.png"].texture);

  // 初期化する
  cat.vx = 0;
  cat.vy = 0;
  stage.addChild(cat);
 
  gameLoop();
}

function gameLoop(){

  requestAnimationFrame(gameLoop);

  // 右へ3pxずつ,下へ2pxずつ
  cat.vx = 3;
  cat.vy = 2;

  cat.x += cat.vx;
  cat.y += cat.vy;

  renderer.render(stage);
}

状態を追加する

ゲームの状態はいまどうなってるのを随時アップデートできるように、先ほどのコードを書き換えます。

var cat, state;

function setup() {
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.y = 96; 
  cat.vx = 0;
  cat.vy = 0;
  stage.addChild(cat);

  // ゲーム始める
  state = play;
 
  gameLoop();
}

function gameLoop(){
  requestAnimationFrame(gameLoop);

  // ゲームの状態をアップデートする
  state();

  renderer.render(stage);
}

function play() {
  cat.vx = 1
  cat.vy = 1
  cat.x += cat.vx;
  cat.y += cat.vy;
}

キーボードコントロール

javascriptにはキーボードのASCIIコードをこのサイトで検索できます。

JavaScript Event KeyCodes

ゲームよく使う上下左右のASCIIコードはこんな感じです。←37↑38→39↓40
これでキーボードで操作できます。

function setup() {

  // 初期設定
  cat = new Sprite("images/cat.png");
  cat.y = 96;
  cat.vx = 0;
  cat.vy = 0;
  stage.addChild(cat);

  // キーコード
  var left = keyboard(37),
      up = keyboard(38),
      right = keyboard(39),
      down = keyboard(40);

  // 左
  left.press = function() {
    cat.vx = -5;
    cat.vy = 0;
  };
  left.release = function() {
    if (!right.isDown && cat.vy === 0) {
      cat.vx = 0;
    }
  };

  // 上
  up.press = function() {
    cat.vy = -5;
    cat.vx = 0;
  };
  up.release = function() {
    if (!down.isDown && cat.vx === 0) {
      cat.vy = 0;
    }
  };

  // 右
  right.press = function() {
    cat.vx = 5;
    cat.vy = 0;
  };
  right.release = function() {
    if (!left.isDown && cat.vy === 0) {
      cat.vx = 0;
    }
  };

  // 下
  down.press = function() {
    cat.vy = 5;
    cat.vx = 0;
  };
  down.release = function() {
    if (!up.isDown && cat.vx === 0) {
      cat.vy = 0;
    }
  };

  state = play;

  gameLoop();
}

function gameLoop() {
  requestAnimationFrame(gameLoop);
  state();
  renderer.render(stage);
}

function play() {
  cat.x += cat.vx;
  cat.y += cat.vy
}