PixiJS自分用メモ

(たぶん少しずつメンテする)

http://www.pixijs.com/
https://github.com/kittykatattack/learningPixi

スプライト

位置

sprite.x = 100;
sprite.y = 200;

sprite.position.set(100, 200)

サイズ

sprite.width = 80;
sprite.height = 120;

sprite.scale.x = 0.5;
sprite.scale.y = 0.5;

sprite.scale.set(0.5, 0.5);

回転

sprite.rotation = 0.5;

アンカーポイント

sprite.anchor.x = 0.5;
sprite.anchor.y = 0.5;

ローディング

PIXI.loader
  .add([
    "image/image0.png",
    "image/image1.png",
    "image/image2.png"
  ])
  .on("progress", (loader, resource)=>{
    console.log("progress: " + loader.progress + "%"); 
  })
  .load(()=>{
    console.log("completed.");
  });

しかる後に以下のようにしてスプライトを作成することができる。

var sprite = new PIXI.Sprite(PIXI.loader.resources["image/image01.png"].texture);

loaderを使わないお便利メソッドパターン

var sprite = PIXI.Sprite.fromImage("image/image01.png");

なお、loaderとお便利メソッドを併用することは避けるべきのようだ。

Just use the loader values if you are using the loader. If you don't want to preload and want to just create a sprite from arbitrary string urls, then use the convenience methods. DON'T MIX THEM PLEASE!! It only works under very specific circumstances and most of the time will be broken or duplicate objects in memory. The two APIs are not related, using the loader to warm the internal texture cache for use with those methods is a hack and should not be used in production code. The texture cache for convenience methods is private and could change at anytime DO NOT RELY ON THIS BEHAVIOR.

テキスト

var message = new PIXI.Text(
  "こんにちはPIXI!",
  {fontSize: 64, fill: "white"}
);
message.position.set(10, 10);
container.addChild(message);