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

前言

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

JSON

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

Sprite img

就如 LearningPixi 所提

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

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

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

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

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

1
2
3
4
5
6
7
8
9
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(); 相關參數

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 被覆蓋了,所以正確的寫法是這樣

1
2
3
4
5
6
7
8
9
10
11
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

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ