PixiJS V5 教學 (28) - JSON 加載圖片

前言

前一章節我們學會該如何裁切圖片,接下來就會來介紹使用 JSON 加載圖片。

animals.json

首先在 LearningPixi 中的範例 animals.json 是這樣

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
{
"frames": {
"cat.png": {
"frame": {
"x": 2,
"y": 2,
"w": 64,
"h": 64
},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {
"x": 0,
"y": 0,
"w": 64,
"h": 64
},
"sourceSize": {
"w": 64,
"h": 64
},
"pivot": {
"x": 0.5,
"y": 0.5
}
},
"hedgehog.png": {
"frame": {
"x": 68,
"y": 2,
"w": 64,
"h": 64
},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {
"x": 0,
"y": 0,
"w": 64,
"h": 64
},
"sourceSize": {
"w": 64,
"h": 64
},
"pivot": {
"x": 0.5,
"y": 0.5
}
},
"tiger.png": {
"frame": {
"x": 134,
"y": 2,
"w": 64,
"h": 64
},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {
"x": 0,
"y": 0,
"w": 64,
"h": 64
},
"sourceSize": {
"w": 64,
"h": 64
},
"pivot": {
"x": 0.5,
"y": 0.5
}
}
},
"meta": {
"app": "http://www.codeandweb.com/texturepacker",
"version": "1.0",
"image": "animals.png",
"format": "RGBA8888",
"size": {
"w": 200,
"h": 68
},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:52586866875309c357a59ef94cc3e344:67b70cfeefc06c04b551ab33c8f1fc7a:b00d48b51f56eb7c81e25100fcce2828$"
}
}

我們可以看到 JSON 上面有各種圖片相關所需要的參數,那由於我將會在 Codepen 上運作,所以參數部分會稍微調整一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const animals = {
"frames": {
...
},
"meta": {
"app": "http://www.codeandweb.com/texturepacker",
"version": "1.0",
"image": "https://i.imgur.com/b3rJy4y.png",
"format": "RGBA8888",
"size": {
"w": 200,
"h": 68
},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:52586866875309c357a59ef94cc3e344:67b70cfeefc06c04b551ab33c8f1fc7a:b00d48b51f56eb7c81e25100fcce2828$"
}
}

接下來只是將 load 的部分替換一下

1
2
3
4
5
loader
.add(animals.meta.image)
.load((loader, resource)=> {
init(resource);
})

剩下的部分就比較簡單一點了

1
2
3
4
5
6
7
8
function init(item) {
let catRectangle = new PIXI.Rectangle(animals.frames['cat.png'].frame.x, animals.frames['cat.png'].frame.y, animals.frames['cat.png'].frame.w, animals.frames['cat.png'].frame.h);
let newTex = new PIXI.Texture(item.fakeimg.texture, catRectangle);
const catSprite = new PIXI.Sprite(newTex);
catSprite.x = 100;
catSprite.y = 100;
app.stage.addChild(catSprite);
}

如果想偷懶一點的話那就使用 for...in 來一次處理,如果不清楚 for...in 是什麼可以參考 這一篇 文章

1
2
3
4
5
6
7
8
function init(resource) {
for(let item in animals.frames) {
let rectangle = new PIXI.Rectangle(animals.frames[item].frame.x, animals.frames[item].frame.y, animals.frames[item].frame.w, animals.frames[item].frame.h);
let newTex = new PIXI.Texture(resource.fakeimg.texture, rectangle);
const sprite = new PIXI.Sprite(newTex);
app.stage.addChild(sprite);
}
}

由於可能我們發現圖片好像只有載入一張,所以我們可以透過修改 json 增加 position 來設定每一張圖片的位子

1
2
3
4
5
6
7
8
9
10
"cat.png":
{
"frame": {"x":2,"y":2,"w":64,"h":64},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
"sourceSize": {"w":64,"h":64},
"pivot": {"x":0.5,"y":0.5},
"position": {"x": 200, "y": 100}
},

最終程式碼就會像這樣

1
2
3
4
5
6
7
8
9
10
function init(resource) {
for(let item in animals.frames) {
let rectangle = new PIXI.Rectangle(animals.frames[item].frame.x, animals.frames[item].frame.y, animals.frames[item].frame.w, animals.frames[item].frame.h);
let newTex = new PIXI.Texture(resource.fakeimg.texture, rectangle);
const sprite = new PIXI.Sprite(newTex);
sprite.x = animals.frames[item].position.x;
sprite.y = animals.frames[item].position.y;
app.stage.addChild(sprite);
}
}

透過以上方是我們可以發現,我們可以用非常偷懶的方式以及搭配 JSON 格式來達到圖片裁切並引入的功能,若圖片有任何的調整或修改,只需要修正該 JSON 檔案就可以。

參考文獻