PixiJS V5 教學 (27) - 裁切圖片

前言

接下來我們將會來了解如何透過 JSON 加載圖片，但是在那之前我們先來學一下如何裁切圖片。

JSON

JSON 是什麼東西應該是不用太多廢話介紹了，如果真的不知道 JSON 是什麼可以試著看一下我先前參加鐵人賽所撰寫的文章 EP.14 RE：從零開始的學習 JS 生活-第十四日

Sprite img

就如 LearningPixi 所提

Pixi封装了一些方便的方式来处理这种情况。所谓雪碧图就是用一个单文件包含你游戏中需要的所有文件，这里就是一个包含了游戏对象和游戏角色的雪碧图。

此外在你實際開發時你也會很常看到這種做法。

通常來講你是必須使用一些軟體才能夠產生 Sprite JSON，但是由於這並不是這一次文章的重點，所以就會直接使用 LearningPixi 底下的 animals.json，在一開始我們是直接引入這個 Sprite img

loader
  .add('fakeimg','https://i.imgur.com/T2vjvYl.png')
  .load((loader, resource)=> {
    console.log('Done');
    init(resource);
  })

圖片加載進來後我們就可以使用 PIXI 內建的方法 new Rectangle(); 來獲取我們想要的圖片，假使來講文件是獲取火箭，那麼我們就直接填入相關的位置

function init(item) {
  let texture = item.fakeimg.texture;
  // 設定要取得的位置
  let rectangle = new PIXI.Rectangle(192, 128, 64, 64);
  // 裁切圖片
  texture.frame = rectangle;
  const sprite = new PIXI.Sprite(texture);
  app.stage.addChild(sprite);
}

這邊額外補充一下 new PIXI.Rectangle(); 相關參數

new PIXI.Rectangle(x, y, width, height);

會發現使用這個方式是一件非常棒的事情，透過這種方式你可以在一張圖片加載所有素材，只需要知道 x、y、以及長寬就可以做到這件事情。

當然我們也可以調整獲取其他的素材也是可以的，但是如果你這樣寫

let texture1 = item.fakeimg.texture;
  let rectangle1 = new PIXI.Rectangle(192, 128, 64, 64);
  texture1.frame = rectangle1;
  const sprite1 = new PIXI.Sprite(texture1);
  sprite1.x = 100;
  sprite1.y = 100;
  spritelImg1.addChild(sprite1);
  
  let texture2 = item.fakeimg.texture;
  let rectangle2 = new PIXI.Rectangle(64, 2, 64, 64);
  texture2.frame = rectangle2;
  const sprite2 = new PIXI.Sprite(texture2);
  spritelImg2.addChild(sprite2);

你會發現火箭被後來的設定給蓋掉了

這個原因是因為 Sprite 被覆蓋了，所以正確的寫法是這樣

let rectangle1 = new PIXI.Rectangle(192, 128, 64, 64);
let newTex = new PIXI.Texture(item.fakeimg.texture, rectangle1);
const sprite1 = new PIXI.Sprite(newTex);
sprite1.x = 100;
sprite1.y = 100;
spritelImg1.addChild(sprite1);

let rectangle2 = new PIXI.Rectangle(64, 2, 64, 64);
let newTex2 = new PIXI.Texture(item.fakeimg.texture, rectangle2);
const sprite2 = new PIXI.Sprite(newTex2);
spritelImg2.addChild(sprite2);

這個問題發生點在於我們沒有複製 Texture 導致，所以我們必須複製 Texture，然後針對其修正才能夠解決這個問題，剛好 PIXI 論壇也有人提出相關問題。

PIXI Texture frames

參考文獻

• LearningPixi
• PIXI Texture frames