PixiJS V5 教學 (3) - 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 底下,其概念就跟群組類似。

參考文獻

0%