Jump to content

Game get laggy when I add more images


Recommended Posts

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");


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

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by a89529294
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...