Game get laggy when I add more images

[a89529294]

Started working on a game where you scratch tickets to win a prize. Everything is fine when I have only one ticket in the canvas. However when I increase the number of tickets to four, the browser starts to feel unresponsive and even the cursor starts to lag. 

// relevant code  

// in scene create function
shape = this.make.graphics();
const mask = shape.createGeometryMask();

ticketBg = this.add
    .image(ticketBgFgWidth, ticketBgFgHeight, "ticketBackground");
ticketFg = this.add
    .image(ticketBgFgWidth, ticketBgFgHeight, "ticketForeground");
result_screen = this.add
    .image(result_screen_width, result_screen_height, "ticketResult");

result_screen.setMask(mask);


//in scene update function 
 var pointer = this.input.activePointer;
    if (pointer.isDown) {
        shape.fillRect(
          pointer.x - sqr_size / 2,
          pointer.y - sqr_size / 2,
          sqr_size,
          sqr_size
        );
    }

Everything is fine if I have one ticket but if I increase the number of tickets, i.e. more ticketBg,ticketFg and result_screen, it gets increasingly laggier. 

[a89529294]

So I added a 

console.log(new Date().getSeconds(), new Date().getMilliseconds());

at the top of the update function.

When there is only 1 ticket (1 set of ticketBg, ticketFg, result_screen) the update function gets called roughly every 10 to 30 ms. But where I increase the number of tickets to nine, it gets called every 30ms to 300 ms. The update function itself takes almost no time to run(0-0.1ms). I'm at a loss here. What can I do to make Phaser call update more frequently?

[GreenCloversGuy]

I think we need to see more information to really get a good idea of what's going on here. Can you show us an example when you have multiple tickets? Does it start out with the reduced time when you add more tickets or do you draw a bit first on the mask and then frame rate goes down?

[a89529294]

So the laggy part is gone after I changed the type property in config to Phaser.CANVAS. But another bug appears, now if I play the game for the first time, everything is fine, but if I play again, the ticket will start out as if it's scratched already. But if I click anywhere on the canvas the ticket goes back to being unscratched. I've made sure to close the scene via this.scene.stop('Ticket') and then restart it using this.scene.launch('Ticket');

//multiple tickets, when I was using Phaser.AUTO, it gets laggy the moment four tickets appear on screen.

 

 

Edited November 3, 2018 by a89529294
spelling

[a89529294]

//scratched ticket

 

https://condescending-euclid-58185d.netlify.com/ here is the game, click the first yellow button to start