iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
1
Modern Web

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

Day28 用mask做刮刮樂效果(2)

延續上篇,這篇主要在於互動這塊

定義一個Graphics,並且要設定成白色,作為筆刷
因為mask的設定是黑色為透空,白色不透空,renderTexture目前是黑色,筆刷則設定成白色
被刷成白色的部分就會顯示出來

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

先將stage設定為可互動

    app.stage.interactive = true;
    // ...接續

監聽drag/touch事件

    app.stage.on('pointerdown', pointerDown);
    app.stage.on('pointerup', pointerUp);
    app.stage.on('pointermove', pointerMove);

    var dragging = false;

在pointerMove時,設定brush的位置,並且渲染更新
app.renderer.render參數(渲染更改的來源,renderTexture,是否清除之前的渲染)

    function pointerMove(event) {
        if (dragging) {
            brush.position.copy(event.data.global);
            app.renderer.render(brush, renderTexture, false);
        }
    }

    function pointerDown(event) {
        dragging = true;
        pointerMove(event);
    }

    function pointerUp(event) {
        dragging = false;
    }
} //setup()結束

還有兩天RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR(大叫)


上一篇
Day27 用mask做刮刮樂效果(1) RenderTexture
下一篇
Day29 簡易版打地鼠小遊戲(1) 畫出場景
系列文
30天Pixi帶你飛上天30

2 則留言

0
King Tzeng
iT邦新手 4 級 ‧ 2018-11-12 09:49:34

想看刮刮樂可以刮出什麼來XDDDD

在前一篇有放XDD
原本想刮出大棕熊 但我懶了直接用現有的圖(咦

XDDDDDD

0
gior__ann
iT邦新手 4 級 ‧ 2020-09-23 17:35:30

您好~想請教下~
PIXI.RenderTexture跟mask的搭配是否僅限在2張圖?

因為模擬真實刮刮樂 ~ 依序產生以下
刮刮樂底圖(PIXI.Sprite [A])
中獎文字 Math.random()(PIXI.Text [B])
要刮的區塊(PIXI.Sprite [文中t1])
刮開後可視的區塊(PIXI.Sprite [文中t2] => 這個我用全透明圖,想說假裝一層膜,刮出來可以 看到A跟B ~~)

   var renderTexture = PIXI.RenderTexture.create(contentWW, contentHH);
   var renderTextureSprite = new PIXI.Sprite(renderTexture);
   mypixi.stage.addChild(renderTextureSprite);
   t2.mask = renderTextureSprite;

結果不行@@,請問這個有辦法解嗎?

我要留言

立即登入留言