Forums » Help » Media Not Preloaded When On Online Server

Hi, I have several questions regarding Impact's automatic preloading of images and assets. I've read from the tutorials that the Loader ennsures that all assets are preloaded and are therefore ready before use (this is ok for me in localhost).

But when I upload my game online, some arts/assets don't show up although the preloading bar has been completed. This happens on the page's first load, and first several plays of the game.

Here's the sample game:
http://tarrent.webs.com/html5/index.html

Maybe I have missed a step in properly preloading images?
All advice are welcome. Thanks.

MyGame = ig.Game.extend({
    // This image will be loaded by the preloader. It is created
    // as soon as the script is executed
    titleImage: new ig.Image( 'media/title.png' ),
    
    init: function() {
        // This image file will NOT be loaded by the preloader. The
        // init() method is only called after the preloader finishes
        // and the game is started.
        this.backgroundImage = new ig.Image( 'media/background.png' );
    }
});

~ http://impactjs.com/documentation/working-with-assets#using-the-preloader

This, maybe? :)

Hi, thanks. I've already read this when I started on Impact but when I read it again... I guess I may have misunderstood some things :)

I found out that maybe the cause of my game's assets lag is because of the dynamic .spawnEntity() and .kill() per Spin press that sets random assets that must be displayed :D

Each Entity's default settings (spinning reel animation or square slot) follow the code above, they initialize assets before the init() function. But when dynamic assets are needed to be spawned, they replace the default preloaded assets from init()! :D

EntitySlot = ig.Entity.extend({
  size: {x:72, y:72},
  animSheet: new ig.AnimationSheet('media/img480/slot_00.jpg'),

  init: function() {
    if(settings.slotIndex != null) {
      this.animSheet = new ig.AnimationSheet('media/img480/slot_'+settings.slotIndex+'.jpg');
    }

    this.addAnim('idle', 0.1, [0]);
    this.addAnim('shine', 0.1, [0,2,3,4,5,6,7,8,9,10,11,12,13]);
    this.currentAnim = this.anims.idle;
  },

  ....

});

Do you have tips and advice on how to properly preload dynamic assets? Thanks :(

updated, much better now thanks again for your tips :D

I've just placed the dynamic entities in a single image (defining all of them before the init() and adding all possible animation indices in init()'s this.addAnim()). Now only their anims.currentAnim need to be dynamically changed.