How to detect finish of rendering

Phaser 3
1

Hi everyone!
Is it possible to know in what moment sprite has finished rendering and was displayed on the screen ?
When I load image with big size using "this.add.image ( … ) it displayed on the screen after 1-2 sec delay, and I want to do next steps in my code only after rendering is done.

2

Hi @Andrio,
The scene object have a render event:
https://photonstorm.github.io/phaser3-docs/Phaser.Scenes.Events.html#event:RENDER

this.scene.events.on('render', listener)

Regards.

3

Thanks, but this is event for rendering all screen. I need event for rendering particulal game object.

This is not works :
menu.on(‘render’, function ()
{ console.log ( “Well Done!”)
} )

4

Sorry @Andrio , I misunderstood your first question.
As far as I know, the visible objects of a scene are added to a spritebatch and then it is rendered on screen. Someone correct me if I’m wrong.
Maybe in your case you can make a specific scene just for that image and use the render event for it. You could access that scene from the sceneManager.

5

Show your code, please.

6

I realized that my problem is in other thing . In the end of my game I display on the screen images with finish results, and when images are loading the game freezes for 1-2 sec .

this.add.image( game.config.width/2, game.config.height/2 + 20, ‘okno_draw’)
…and others…

But when user play next game after restart scene freeze disappears . It looks like images have loaded in brouser cash and when you play again they loading immediately.

Do someone have any ideas how get rid from this freezing when player plays first game ?

You can play my game by this link if you have VK account : https://vk.com/app7067858_107730593

7

What exactly are you loading, and how?

8

Here is examples what I am loading :

    menu_okno = my_this.add.image( game.config.width/2,  game.config.height/2 + 20, 'okno_draw')  .setScrollFactor(0,0)  .setDepth(6);  


  my_this.add.image( game.config.width/2 + side_shag_x,  game.config.height/2 + 120, 'table_nejtral')  .setScrollFactor(0,0)  .setScale(0.95) .setDepth(6);  

  my_this.add.image( game.config.width/2 - side_shag_x,  game.config.height/2 + 120, 'table_nejtral')  .setScrollFactor(0,0)  .setScale(0.95) .setDepth(6);        


 text_sunduk_para1 =  my_this.add.text(game.config.width/2 - 100, game.config.height/2 + 10 , para1_all_sund, {fontFamily: "shadow_regular", fontSize:26, color:'#ffffff', fontStyle:'bold'})  .setScrollFactor(0,0)  .setOrigin(0.5)  .setDepth(7);

 text_sunduk_para2 =  my_this.add.text(game.config.width/2 + 100, game.config.height/2 + 10, para2_all_sund, {fontFamily: "shadow_regular", fontSize:26, color:'#ffffff', fontStyle:'bold'})  .setScrollFactor(0,0)    .setOrigin(0.5)  .setDepth(7);


var but_back = my_this.add.image(game.config.width/2 - 105, koor_v.y + menu_okno.height - 120 , 'button_back')   .setScrollFactor(0,0)   .setDepth(7) .setInteractive();

var but_back_svet = my_this.add.image(game.config.width/2 - 105, koor_v.y + menu_okno.height - 120 , 'button_back_svet')  .setVisible(false)   .setScrollFactor(0,0)   .setDepth(7) .setInteractive();

   var moneta = my_this.add.image(game.config.width/2 + 30 + 100 * znak, y_text_koord + 52, 'small_coin')  .setScrollFactor(0,0)   .setDepth(7); 
  
   text_zol_rezult =  my_this.add.text(moneta.x + moneta.width + 3, y_text_koord + 55, '', {fontFamily: "frankl_heavy", fontSize:20, color:'#9d4032', fontStyle:'bold'})  .setOrigin(0.5) .setScrollFactor(0,0)  .setDepth(7);


 text_name_rezult =  my_this.add.text( game.config.width/2 + 100 * znak, y_text_koord, '', {fontFamily: "BERNIER", fontSize:23, color: color_name})  .setOrigin(0.5) .setScrollFactor(0,0)   .setDepth(7); 

 text_slova_1 =  my_this.add.text( game.config.width/2 + 100 * znak, y_text_koord + 30, 'Рейтинг:       Монеты:', {fontFamily: "BERNIER", fontSize:18, color: '#9d4032'})  .setOrigin(0.5)  .setScrollFactor(0,0)   .setDepth(7);
9

Record a performance timeline to figure out what the browser is doing during the pause.

1 Like