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

前回の話

スプライトを作る三つの方法を紹介しました。

三つの方法：

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

1. 画像を使う（個別一個一個を読み込む）後編

前回では複数の画像を読み込みと、PIXIのfunctionを別名に変えてコードを読み易さの向上化まで勉強しました。
続きは、その複数の画像を表示させたいと思います。

//別名（Aliases）
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite;

//ベースコード
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

//読み込みファイルのパス設定と読む込んだ後実行する関数指定
loader
  .add([
    "images/cat.png",
    "images/blob.png",
    "images/explorer.png"
  ])
  .load(setup);

function setup() {
  console.log("setup"); 

  var cat = new Sprite(resources["images/cat.png"].texture),
      blob = new Sprite(resources["images/blob.png"].texture),
      explorer = new Sprite(resources["images/explorer.png"].texture);

  stage.addChild(cat);
  stage.addChild(blob);
  stage.addChild(explorer);

  //位置指定
  blob.position.set(82, 82);
  explorer.position.set(128, 128);
  
  renderer.render(stage);
}

位置指定position.set(x, y)を入れないと、全部左上になります。
結果はこんな感じになります。

f:id:manmanrai:20170424142953p:plain

読み込み進捗表示

先ほどのloader functionの中で.on()追加して、ローディング中監視できるようになってるようです。

loader
  .add([
    "images/cat.png",
    "images/blob.png",
    "images/explorer.png"
  ])
  .on("progress", loadProgressHandler)
  .load(setup);

loadProgressHandler functionも追加します。

function loadProgressHandler(loader, resource) {

  //外部画像のURLを表示する
  console.log("loading: " + resource.url); 

  //loader.add()functionで読み込んだらこれで書いても良い、結果は同じ
  console.log("loading: " + resource.name);

  //ローディングのパーセンテージを表示する
  console.log("progress: " + loader.progress + "%"); 
}

コンソールの画面開くと、こんな感じになります。（ここではloader.add()使ったので、resource.urlとresource.nameは同じもの出されてます。）

f:id:manmanrai:20170424143959p:plain

スプライトのstyle事情

先ほどもチラッと出ましたけど、位置の話position.set(x, y);
実はこういう書き方もオッケーです。

cat.position.set(20, 30);

// 分けて書いても良い
cat.x = 20;
cat.y = 30;

そして、個別のサイズも似たような感じで調整できます。（全て左上基準に）

cat.width = 30;
cat.height = 50;

試してみましたが、widthかheightのみ設定した場合、比率自動的に調整してくれないです。あと、cssみたいに"auto"で書いたらこの画像自体がダメになっちゃいます。（非表示になります。エラー出ません。）

そして、拡大縮小の書き方も

cat.scale.set(0.5, 0.5);

cat.scale.x = 0.5;
cat.scale.y = 0.5;

最後は回転される方法です。

// 回転の単位が不明ですが、恐らくπです。
cat.rotation = 0.3;

回転する前に何も指定しない場合は画像の左上が中心として回転しますが、画像の中心に中心点アンカー（anchor）を設置したい場合には、こう書きます。

cat.anchor.set(0.5, 0.5);

// 分けて書いても良い
cat.anchor.x = 0.5;
cat.anchor.y = 0.5;

// 回転
cat.rotation = 0.3;

ここのアンカーの単位は%です。0%~100%から0~1で表示するのです。要するには左からx軸何％と上からy軸何％のところに回転中心を置くのか決めます。
パーセンテージで正確な場所に指定するの難しいであれば、座標式の指定方法もあります。pivotで指定できます。

cat.pivot.set(32, 32)

以上、個別の画像で作成できたスプライトの説明が以上になります！！

2. プロジェクト内に使いたい全部の画像（sub-image）をまとめた大き画像（tileset）を使う（複数枚の画像を一枚にまとめるってこと）全編

少し前にレスポンシブサイトがまだ流行ってない時、ウェブサイトのパフォーマンスの向上のため、読み込む画像の画像を極力減らして、アイコンなど画像とかいっぱい集めて一枚の画像として読み込んで、cssで背景position指定するって通称CSSスプライトというやり方がありましたね。
tilesetの概念は同じです。
tilesetのことをsprite sheetで呼びこともあるらしいです。

f:id:manmanrai:20170424174548p:plain

これがチュートリアル中に入ってた画像です。一個の画像のサイズは64x64です。

とりあえずこのtitleset.pngをloaderに入れます。

loader
  .add("images/tileset.png")
  .load(setup);

function setup() {

  // TextureCache functionを使う
  var texture = TextureCache["images/tileset.png"];

  // 新しい長方形(x座標, y座標, x幅, y幅)
  var rectangle = new Rectangle(192, 128, 64, 64);

  // 切り出した長方形を渡す
  texture.frame = rectangle;

  // ロケットをスプライトとして扱う
  var rocket = new Sprite(texture);

  // canvasのどこに置くか書く
  rocket.x = 32;
  rocket.y = 32;

  stage.addChild(rocket);  
  renderer.render(stage);
}

ロケットのこんな感じで出ます。

f:id:manmanrai:20170424175530p:plain

もし自分が算数ミスなかったら、このtilesetの中に34枚小さい画像が含まれています。全部一々js内で書くと、結構大変なことになります。pixi.jsのおすすめはJSONファイルで位置と名前を指定して、JSONを読み込めば大丈夫です。

ここでチュートリアルがオススメしてくれた便利ツールがあります。

www.codeandweb.com

一個一個画像を用意するだけなので、ポンって入れたら、まとめてくれるらしいです。そして、画像名を含めたJSONもくれます！
まだ実践してませんが、説明を見るだけでワクワクします。相当便利ですね。

ちなみに、jsonファイル形式こうなるそうです。

"blob.png":
{
    "frame": {"x":55,"y":2,"w":32,"h":24},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":32,"h":24},
    "sourceSize": {"w":32,"h":24},
    "pivot": {"x":0.5,"y":0.5}
},