pixi的使用之建立和操作精靈

前端開膛手發表於2018-10-31

1，Pixi的renderer物件生成一個HTML<canvas>節點並且能指定如何在Canvas上展示你的影像。

2，建立一個特殊的PixiContainer物件名為stage。正如你將看到，這個舞臺物件會被用作持有所有你想讓Pixi展示的東西的根容器。

//Create the renderer
var renderer = PIXI.autoDetectRenderer(256, 256);

//Add the canvas to the HTML document
document.body.appendChild(renderer.view);

//Create a container object called the `stage`
var stage = new PIXI.Container();

//Tell the `renderer` to `render` the `stage`
renderer.render(stage);複製程式碼

renderer = PIXI.autoDetectRenderer(
  256, 256,
  {antialias: false, transparent: false, resolution: 1}
);
//renderer.view 物件只是一個再普通不過的 <canvas> 物件，所以你可以像控制其他任何 canvas 物件一樣控制它。
這裡告訴你如何給canvas一個虛線邊框：renderer.view.style.border = "1px dashed black";
這裡告訴你如何給canvas一個背景色：renderer.backgroundColor = 0x061639;

複製程式碼

3，Pixi通過WebGL在GPU上渲染影像，影像需要被格式化為GPU可以處理的格式。一個為WebGL準備的影像稱為紋理。在你製作精靈展示影像之前，你需要把一個原始的影像轉化為一個WebGL紋理。為了保持所有的東西都能在底層快速高效的工作，Pixi使用了一個 紋理快取 去儲存和引用所有精靈圖所需要的紋理。

4，Pixi有一個 Sprite 類，它是建立遊戲精靈的通用方式。這裡還有三個主要的方式去建立它們：

  • 使用單獨一個圖片檔案
  • 使用圖片集 的一個子影像。圖片集是一個單獨的，大的影像，它包含了所有遊戲中你需要的圖片。（譯者注：就是我們說的雪碧圖吧）。
  • 使用紋理圖集（一個定義了在雪碧圖中每個子圖的位置和大小的JSON檔案）

5，先找到紋理，通過紋理再製作成精靈

var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
var sprite = new PIXI.Sprite(texture);複製程式碼

6，如何載入一個圖片並把它轉化為一個紋理？用Pixi的內建 loader 物件。Pixi強大的loader 物件是你載入任何一種影像的全部所需。

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

function setup() {
  //This code will run when the loader has finished loading the image
}複製程式碼

7，Pixi開發團隊推薦 如果你使用了載入器，你應該通過引用紋理中的loader 的 resources 物件來建立精靈

var sprite = new PIXI.Sprite(
  PIXI.loader.resources["images/anyImage.png"].texture
);複製程式碼

有一個例子：

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

function setup() {
  var sprite = new PIXI.Sprite(
    PIXI.loader.resources["images/anyImage.png"].texture
  );
}複製程式碼

8，可以通過一連串的 add 方法來一次性載入許多影像：

PIXI.loader
  .add("images/imageOne.png")
  .add("images/imageTwo.png")
  .add("images/imageThree.png")
  .load(setup);複製程式碼

更好的做法是，把所有的你想載入的檔案放到一個陣列裡，只通過一個add方法：

PIXI.loader
  .add([
    "images/imageOne.png",
    "images/imageTwo.png",
    "images/imageThree.png"
  ])
  .load(setup);複製程式碼

9，製作了一個精靈之後，想要在canvas上看到它，還有兩件事情你不得不做：

通過 stage.addChild 方法把精靈新增到 Pixi的 stage中：

stage.addChild(cat);複製程式碼

告訴Pixi的 renderer 去渲染這個舞臺。

renderer.render(stage);複製程式碼

10，從舞臺中移除一個精靈，用 removeChild 方法：

stage.removeChild(anySprite)複製程式碼

但是通常設定精靈的 visible 屬性為 false 是一個讓精靈消失的高效而且簡單方式。

anySprite.visible = false;複製程式碼

11，你可以通過給Pixi物件和方法設定一個你經常用的簡短的別名來使你的程式碼有更高的可讀性

var TextureCache = PIXI.utils.TextureCache
var texture = TextureCache["images/cat.png"];
複製程式碼

12，如果因為某些原因你需要通過普通JavaScript影像物件製作一個紋理，你可以通過用BaseTexture 和 Texture 類：

var base = new PIXI.BaseTexture(anyImageObject),
    texture = new PIXI.Texture(base),
    sprite = new PIXI.Sprite(texture);複製程式碼

13，如果你想從任何已經存在的canvas節點中製造一個紋理，你可以用 

BaseTexture.fromCanvasvar base = new PIXI.BaseTexture.fromCanvas(anyCanvasElement),

14，如果你想改變正在展示的精靈紋理，用 texture 屬性。設定它的值為任何 Texture 物件：

anySprite.texture = PIXI.utils.TextureCache["anyTexture.png"];複製程式碼

15，為每一個資源設定一個獨一無二的名字是有可能的。只要在add方法的第一個引數傳入一個字串名字。

PIXI.loader
  .add("catImage", "images/cat.png")
  .load(setup);複製程式碼
var cat = new PIXI.Sprite(PIXI.loader.resources.catImage.texture);複製程式碼

16，Pixi的載入器有一個特殊的 progress 事件會在每次當一個檔案載入的時候呼叫一個可定製的函式。 progress 事件會被loader的on方法呼叫：

PIXI.loader.on("progress", loadProgressHandler);複製程式碼

17，通過給 loadProgressHandler新增 loader 和 resource 引數，可以明確的指明哪個檔案已經載入了以及檔案載入的百分比

PIXI.loader
  .add([
    "images/one.png",
    "images/two.png",
    "images/three.png"
  ])
  .on("progress", loadProgressHandler)
  .load(setup);

function loadProgressHandler(loader, resource) {

  //Display the file `url` currently being loaded
  console.log("loading: " + resource.url); 

  //Display the precentage of files currently loaded
  console.log("progress: " + loader.progress + "%"); 

  //If you gave your files names as the first argument 
  //of the `add` method, you can access them like this
  //console.log("loading: " + resource.name);
}

function setup() {
  console.log("All files loaded");
}複製程式碼

18，可以通過改變 x 和 y 的值來改變貓的位置。如何把貓居中的程式碼：

cat.x = 96;
cat.y = 96;複製程式碼

你可以用一行程式碼把x和y的值一起設定，而不是單獨設定：

sprite.position.set(x, y)複製程式碼

19，可以通過設定 width 和 height 來改變精靈圖的大小：

cat.width = 80;
cat.height = 120;複製程式碼

精靈圖頁有scale.x和scale.y屬性可以成比例的改變精靈的寬和高。這裡告訴你如何設定貓的大小為其原來的一半：

cat.scale.x = 0.5;
cat.scale.y = 0.5;複製程式碼

Pixi有一個可供替代的，簡潔的方式通過一行程式碼 scale.set 方法設定精靈的尺寸。

cat.scale.set(0.5, 0.5);複製程式碼

20，可以通過設定 rotation 屬性的弧度值來使精靈旋轉。

cat.rotation = 0.5;複製程式碼

精靈的左上角代表它的 x 和 y 位置。這個點叫做 錨點。

想讓精靈圖圍繞自己的中心旋轉呢？改變 anchor 的值，讓它定位到精靈的中心：

cat.anchor.x = 0.5;
cat.anchor.y = 0.5;複製程式碼

就像設定position 和 scale一樣，你同樣可以通過一行程式碼設定錨點的x和y的值：

sprite.anchor.set(x, y)複製程式碼

21，精靈圖有一個 pivot（中心點）屬性，它和anchor的工作方式很相似。如果你改變了中心點的值並旋轉精靈，它將圍繞這個原點旋轉。

cat.pivot.set(32, 32)複製程式碼

如果你改變精靈的中心點，你同時也改變了它的x/y原點。

anchor 和 pivot很相似。 anchor可以移動精靈圖的紋理原點，通過設定0-1的值。pivot通過設定畫素值來改變精靈的x和y的原點值。

22，通過圖元製作的元素，似乎不能使用anchor或者pivot，比如圓形，錨點已經固定為其圓心。不同的元素層疊，其實就是他們的錨點進行層疊，那麼如何讓他們居中層疊呢，設定他們的重心為錨點即可：sprite.anchor.set(0.5)。或者使用sprite.pivot.set(sprite.width/2,sprite.height/2)。


相關文章