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

發表於 分類於

Google AD

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

前一章節我們學會該如何裁切圖片，接下來就會另一種方式來加載圖片。

前言

前一章節我們學會該如何裁切圖片，接下來就會來介紹使用 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 檔案就可以。

參考文獻