How to improve Load time?

[khleug35]

About loading times 

Maybe my code is not compiled well, which causes the loading speed to slow down. I hope anyone can give me an idea to solve the problem. Thanks

For example, my game deadgun is 20Mb, My BGM file has 16Mb, so  the load time is too slow.

In order to avoid initial load time quite slow.
I create a Loading Scene for loading asset

In Main Scene

game.createScene('Title', {
    ....

    init: function() {

        this.choice1 = new game.Button('title/gamestart.png',551,480,function(){
        WhatSceneDoYouWantToLoad='StageSelect';
        game.system.loadScene('Loading');    
        });
   
        this.choice2 = new game.Button('title/password.png',836,480,function(){
        WhatSceneDoYouWantToLoad='PASSWORD';    
        game.system.loadScene('Loading');        
        });
        
        this.choice3 = new game.Button('title/bossfight.png',551,585,function(){
       WhatSceneDoYouWantToLoad='StageSelectBoss';    
        game.system.loadScene('Loading');       
        });

        this.choice4 = new game.Button('title/credits.png',836,585,function(){
        WhatSceneDoYouWantToLoad='Credits';      
        game.system.loadScene('Loading');  
        });
        }
    .... 

 

In Loading Scene

game.createScene('Loading', {
     backgroundColor: "#000000",
     init: function() {
        
 switch(WhatSceneDoYouWantToLoad){
  
     case 'StageSelect':
     game.addAsset('bgm/shoot1.wav');
     game.addAsset('bgm/shoot2.wav'); 
     game.addAsset('bgm/hurt.mp3');
     game.addAsset('bgm/jump.mp3'); 
     game.addAsset('bgm/get.mp3');
     game.addAsset('bgm/boss_dead.mp3');    
     game.addAsset('bgm/boom.mp3');      
     game.addAsset('bgm/boss.mp3');  
     game.addAsset('bgm/stageselect.mp3');
     break;
     case 'PASSWORD':
     game.addAsset('bgm/hurt.mp3');    
     break;
     case 'StageSelectBoss':
     game.addAsset('bgm/shoot1.wav');
     game.addAsset('bgm/shoot2.wav'); 
     game.addAsset('bgm/hurt.mp3');
     game.addAsset('bgm/jump.mp3'); 
     game.addAsset('bgm/get.mp3');
     game.addAsset('bgm/boss_dead.mp3');    
     game.addAsset('bgm/boom.mp3');      
     game.addAsset('bgm/boss.mp3');  
     game.addAsset('bgm/stageselect.mp3');      
     break;     
     case 'Credits':
     game.addAsset('bgm/shoot1.wav');
     game.addAsset('bgm/shoot2.wav'); 
     game.addAsset('bgm/hurt.mp3');
     game.addAsset('bgm/jump.mp3'); 
     game.addAsset('bgm/get.mp3');
     game.addAsset('bgm/boss_dead.mp3');    
     game.addAsset('bgm/boom.mp3');      
     game.addAsset('bgm/stageselect.mp3');
     game.addAsset('bgm/Ending.mp3');    
     break;
     //stage
     case 'Stage1':
     game.addAsset('bgm/stage1.mp3');      
     break;  
     case 'Stage2':
     game.addAsset('bgm/stage2.mp3');      
     break; 
     case 'Stage3':
     game.addAsset('bgm/stage3.mp3');      
     break; 
     case 'Stage4':
     game.addAsset('bgm/stage4.mp3');      
     break; 
     case 'Stage5':
     game.addAsset('bgm/stage5.mp3');      
     break;     
     case 'Stage5-4':
     game.addAsset('bgm/FinalStage.mp3');  
     game.addAsset('bgm/finalboss.ogg');    
     break; 
     case 'Stage5-5-Boss':
     game.addAsset('bgm/finalboss.ogg');    
     break;
     case 'Ending':
     game.addAsset('bgm/Ending.mp3');      
     break; 
  

    //Loading Bar
     this.bar = new game.Graphics();
        this.bar.fillColor = '#ffffff';
        this.bar.drawRect(300, game.height/2, 600, 40);
        this.bar.center(game.scene.stage);
        this.bar.addTo(game.scene.stage);
        this.bar.scale.x = 0;
        this.loader = new game.Loader();
        
          this.loadingtext = new game.SystemText("Loading...");
          this.loadingtext.size = 60;
          this.loadingtext.color = '#ffff68';
          this.loadingtext.position.set(490, 250);
          

           
        this.loader.onStart = function() {
             game.scene.loadingtext.addTo(game.scene.stage); 
          }
        };
         
          
        this.loader.onProgress = function() {
            game.scene.bar.scale.x = game.scene.percent / 100;
        };
        this.loader.onComplete = function() {
         game.system.loadScene(WhatSceneDoYouWantToLoad);
        };
        this.loader.start();
 }       

but load time seemed quite slow, anyone have good idea or right methed to asset loading?? Thank you very much. 

[enpu]

Are you now talking about load times in web version or in the app, or both?

[enpu]

I can see that you have three different loading screens (initial, stage select and stage). Which one is too slow?

[khleug35]

Hello, @enpu

I have received feedback, my new game in android app's load time slow and it can be improved.

I take a video for reference. 

https://www.youtube.com/watch?v=WWN6Zc5ceug

for my phone

0:00 - 0:02 The initial load time is taken 2sec.
0:04 - 0:09 Stage Select load time is taken 5sec.
0:10 - 0:12 Stage 1 load time is taken 2sec.
2:56 - 2:58 Stage 2 load time is taken 2sec.
5:12 - 5:14 Stage 3 load time is taken 2sec.
8:20 - 8:23 Stage 4 load time is taken 3sec.
12:27 - 12:29 Final Stage load time is taken 2sec.
15:41 - 15:46 Final Stage  2 load time is taken 5sec.

 

For me, I think that the load time is not very very slow, but is it possible to improve??? thank you very much

 

[Wolfsbane]

Maybe you're loading all the assets again twice? (or many times, depending on which scene you open)

You do this:

 game.addAsset('bgm/shoot1.wav');
     game.addAsset('bgm/shoot2.wav'); 
     game.addAsset('bgm/hurt.mp3');
     game.addAsset('bgm/jump.mp3'); 
     game.addAsset('bgm/get.mp3');
     game.addAsset('bgm/boss_dead.mp3');    
     game.addAsset('bgm/boom.mp3');      
     game.addAsset('bgm/boss.mp3');  

 

But you're doing it for each scene load. I think once you've already added the assets to the game, they're in memory, and you don't need to load them again. You could load the generic sound/resources all at once at the start, and then only load scene specific resources for each scene. (e.g. background music only used in one scene)

Loading is slow, but once they're in memory, they'll be super fast. 20mb is not too much to keep in memory.

[enpu]

Yeah just load assets that you really need and don't load them multiple times.

For images you can try to compress PNG files (try TinyPNG) and/or use sprite sheets (try Texture Packer).
For audio you can try to lower bitrate, use compressed formats (m4a, ogg, mp3) and make your music loops shorter.

You can also try to change the amount of files the engine tries to load at the same time, default is 4:

game.config = {
    loader: {
        maxFiles: 8 // Load 8 files at same time
    }
};

 

[khleug35]

@Wolfsbane

Thx for reply 

The reason for I doing each scene load. I hope I don't want to load all asset in the main scene(it will case initial load time quite slow)
so I doing each scene load. I tested it, when the game load the assets for each one time.
the second time very too fast, so I think when the system load the assets one time, It will not load the asset again every time.
 

[khleug35]

@enpu

Thank you for reply and suggestion.
TinyPNG and TexturePacker is a nice, simple to compress images online, thx

[AndreasLoew]

TexturePacker already does a quite good job in compressing PNGs. It contains algorithms to reduce the PNGs to 8 bit and includes pngopt to reduce the file size. TinyPNG might still reduce the size a bit more - but you usually don't gain more than 5% compared to TexturePacker only.

 

[ftguy2018]

Talking about loading resources in PANDA2, is there a way to tell the engine that an asset must be reloaded from the server and not from the browser cache ?  We have some json data that must fetched from the server every time and chrome has some issues to reload them, it does always serve the old version.... 

[enpu]

You can add some random number to the end of the url, to prevent browser from loading the file from cache. Like this:

game.addAsset('https://panda2.io/temp/example.json?' + Date.now(), 'example.json');

game.createScene('Main', {
    init: function() {
        var json = game.getJSON('example.json');
    }
});

 

[enpu]

Actually i just added third parameter to addAsset function that will do this for you automatically.

// Never loads the file from cache
game.addAsset('https://panda2.io/temp/example.json', 'example.json', true);

 

[ftguy2018]

@enpu thank you so I need to update to the latest version to get that functionality ? Is that the official one or the dev one ? 

 

[enpu]

Yes you need to update to latest dev version