Jump to content

background load delays


Recommended Posts

Hey Guys! Need some help here. Total beginner in Phaser. I am making a simple animation, and the issue is that I have a background image that must be loaded so no black background. It does load but with a second delay so the black background first and then yellow. How to make it that there is no black at any time? Below is my code is the code. I would really appreciate your help. 

    window.onload = function() {

      var game = new Phaser.Game(800, 600, Phaser.WEBGL, '', { preload: preload, create: create });   

         function preload () {

             game.load.image('bg', 'assets/yellow-bg.png');//loads the bg image
             game.load.atlas('tractorAtlas', './assets/tractor_atlas.png', './assets/tractor.json');


      function create () {            
          game.add.image(0, 0, 'bg');
          tractor = this.add.sprite(600,300, 'tractorAtlas');
          moveTractor = this.add.tween(tractor);
          tractor.animations.play('walk', 6, false);       
          moveTractor.to({x:300}, 1800, 'Linear', true, 0);



Link to comment
Share on other sites

You could go one step further and load an image using regular ole html, when your game has finished its preload then remove the image (or use a transparent canvas and place the image behind). You can even do a progress bar in regular html and remove that too when you're ready.

That way you're just waiting for the initial image load rather than everything else. 

You can even get smarter, if you need to, and load just what you need and load the rest sometime later when it makes sense (preferably without making the user/player wait). Loading patterns can be tricky though, particularly over the rickety old internet, generally users will wait for games to preload their stuff so don't get clever with loading unless you need to.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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