這次的範例是這個,接下來會做一個進度條,這篇先來做Mask~

背景素材:

先將圖片載入並放在正中央

let bg = PIXI.Sprite.fromImage('img/loading.jpg');

bg.anchor.set(0.5);

bg.x = app.screen.width / 2;
bg.y = app.screen.height / 2;

畫一個圓角長方形也放在中央,疊在圖片上面

let graphics = new PIXI.Graphics();

graphics.beginFill(0xFFffff);
graphics.drawRoundedRect(app.screen.width / 4, app.screen.height / 2, 400, 50, 30)
graphics.endFill();

新增一個container,並把背景放進去,最後設定container的mask給長方形,這樣就可以做好遮罩囉~

let container =  new PIXI.Container();
container.addChild(bg);
container.mask = graphics;

app.stage.addChild(container);