0

I want the flash light effect to follow mobile touch events in pixi js

I am trying to make the pixijs mask filter responsive as the flash light effect follows the mouse pointer , so i need to make it follow the touch events.Here's the link of the effect https://pixijs.io/examples/#/masks/filter.js

const app = new PIXI.Application();
document.querySelector('#landing').appendChild(app.view);

// Inner radius of the circle
const radius = 90;

// The blur amount
const blurSize = 52;

app.loader.add('landing', './imgs/bg.png');
app.loader.load(setup);

function setup(loader, resources) {
    const background = new PIXI.Sprite(resources.landing.texture);
    app.stage.addChild(background);
    background.width = app.screen.width;
    background.height = app.screen.height;

    const circle = new PIXI.Graphics()
        .beginFill(0xFF0000)
        .drawCircle(radius + blurSize, radius + blurSize, radius)
        .endFill();
    circle.filters = [new PIXI.filters.BlurFilter(blurSize)];

    const bounds = new PIXI.Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2);
    const texture = app.renderer.generateTexture(circle, PIXI.SCALE_MODES.NEAREST, 1, bounds);
    const focus = new PIXI.Sprite(texture);

    app.stage.addChild(focus);
    background.mask = focus;

    app.stage.interactive = true;
    app.stage.on('mousemove', pointerMove);
    
    

    function pointerMove(event) {
        focus.position.x = event.data.global.x - focus.width / 2;
        focus.position.y = event.data.global.y - focus.height / 2;
    }

  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.7/pixi.min.js"></script>
Tanmay Vikhankar
  • 1

1 Answers1

1

Mobile event system have some difference from computer event system. Mouse events' names starts with "mouse" but mobile events' names stars with "touch". Therefore you should change "mousemove" to "touchmove" for mobile. If you want to work both mobile and computer, you should write both "touchmove" and "mousemove":

app.stage.on('mousemove', pointerMove);
app.stage.on('touchmove', pointerMove);
Hasser
  • 11
  • 1