PixiJS V5 教學 (3) - Container

發表於 更新於 分類於
前面基本知識也算是講得差不多，接下來將會介紹 PIXI 中的一個重要的東西，也就是 Container。

前言

前面基本知識也算是講得差不多，接下來將會介紹 PIXI 中的一個重要的東西，也就是 Container。

Container

說到 Container 若是有寫過 Boostrap 的人就會知道它是網格系統必備的東西，而在 PixiJS 中也是非常重要的要點之一，在 IT 鐵人賽中有一位大大就有 介紹 PIXI.container 的特效

  • 容器　　：可加入其他元件與元件索引操作，如新增移除設定深度
  • 可互動　：預設不可互動，設定為可互動後，可使用各種互動監聽
  • 可視物件：可設定 x、y、alpha、setTransform 等

這邊拉回 Boostrap 的場面，我們都知道 Container 的頂頭就是 HTML 的 <body>，但是在 Pixi 的 Container 卻不是，Pixi 的 Container 起始點是 stage，也可以把 stage 看成 <body>。

那由於我們知道 PIXI 的頂層是 stage 了，所以假使我們要加入一個新的 container (容器)，那麼就要這樣子寫

1
2
const container = new PIXI.container();
app.stage.addChild(container);

addChild 的意思就在 stage 加入一個可以看見的物件，當然語法不只有 addChild，還有另一種 addChildAt，但是 addChildAt 較複雜，因為還有包含深度。

那假使是要取得容器呢?那就是變成使用 getChildAt 以及 getChildIndex，這兩者差別在於前者是取得物件，後者則為回傳物件的 index。

此外也可以指定物件深度 setChildIndex。

前面講一推廢話說真的也看不出 Container 的用處，就跟你直接在網頁上使用 .container 若沒包含 .row > .col 以及內容是看不出效果的，所以就試著加入一些東西囉~

首先若要在 PIXI 裡面加入文字是使用 PIXI 中的一個 API，也就是 PIXI.Text 的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const app = new PIXI.Application({
  view: document.getElementById('main'),
  width: 200,
  height: 200,
  antialias: true,
  transparent: false,
  backgroundColor: 0x00CC99,
});

const container = new PIXI.Container();
app.stage.addChild(container);

const PIXIText = new PIXI.Text('這是一段話');
container.addChild(PIXIText);

而 new PIXI.Text('這是一段話') 就會加入至 container 底下，其概念就跟群組類似。

參考文獻