iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
2
Modern Web

30天Pixi帶你飛上天系列 第 19

Day19 用pixi-display做light

這篇會用到pixi-display.js的plugin

請到 這裡下載

會特別講這篇是因為spotlight的效果感覺滿有機會用到的,也有一些迷宮遊戲要遮罩你的視線,就只留一個小區塊可以看到周遭環境

平常我們建立pixi app之後,就直接處理其他的東西,這次要加這個

app.stage = new PIXI.display.Stage();

再來是光源的設定,先做一個環境光

var lighting = new PIXI.display.Layer();
    lighting.on('display', function (element) {
    element.blendMode = PIXI.BLEND_MODES.ADD
});

lighting.useRenderTexture = true;
lighting.clearColor = [0.5, 0.5, 0.5, 1]; // 環境光顏色 0~1 [r,g,b,a]

app.stage.addChild(lighting);

var lightingSprite = new PIXI.Sprite(lighting.getRenderTexture());
lightingSprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;

app.stage.addChild(lightingSprite);

https://ithelp.ithome.com.tw/upload/images/20181029/20111962rRYhii2Hti.jpg

再來建立一個Graphics

 var lightbulb = new PIXI.Graphics();
  var rad = 50;
  lightbulb.beginFill(0xffffff);
  lightbulb.drawCircle(0, 0, rad);
  lightbulb.endFill();

最後把燈光指定給Graphics
然後加到場景中

lightbulb.parentLayer = lighting;
app.stage.addChild(lightbulb);

今天講的官方範例是這個
https://ithelp.ithome.com.tw/upload/images/20181029/20111962JgTArFBlda.jpg


上一篇
Day18 超好用工具dat.GUI
下一篇
Day20 z-order
系列文
30天Pixi帶你飛上天30

尚未有邦友留言

立即登入留言