• Content Count

  • Joined

  • Last visited

  1. Thanks for the answer guys. I tried the solution but the issue is still there. I noticed that the ticketbackground image, ticketforeground image and ticketResult image kept flickering while on android chrome, but not on pc nor ios safari. Can anyone take a look at the game on android for me? It was especially bad when you select the 4 tickets option.
  2. Right now I'm trying to create a mask effect where once you click on a ticket that part gets erased. var ticketBackground = this.add.image(....) var ticketForeground = this.add.image(....) var ticketResult = this.add.image(...) var shape= this.make.graphics(); var mask= shape.createGeometryMask(); ticketResult.setMask(mask); .... //x,y are positions of the user's mouse shape.fillRect( x - coinWidth / 2, y - coinWidth / 2 , coinWidth, coinWidth ) So I'm creating a bunch of rectangles to reveal the erased parts, but it gets really laggy when I try to play the game on android. It's fine on pc however. What I'm wondering is whether there is a better way to do this. Here is the game https://condescending-euclid-58185d.netlify.com/
  3. //scratched ticket https://condescending-euclid-58185d.netlify.com/ here is the game, click the first yellow button to start
  4. 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.
  5. Hey I tried it on chrome on Mac and the first time it gave me a black screen. However after I refreshed the problem seemed to have gone away.
  6. 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?
  7. 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.