Loading PreloadJS using RequireJS

Question

I am new in using RequireJS in loading modules especially loading libraries like CreateJS. I wanted to use PreloadJS with SoundJS. I have properly loaded SoundJS via RequireJS and I am not having problem so far. What I am having problem with is the PreloadJS. I load it using this way:

require.config(
  {
    paths :
    {
        soundjs   : 'core/soundjs-0.6.1.min'
      , preloadjs : 'core/preloadjs-0.6.1.min'
    }

    ,shim :
    {
        'preloadjs' : { exports : "createjs" }
      , 'soundjs'   : { exports : "createjs.Sound" }
    }
  });

require(['src/MainGameScene' , 'src/Runner' , 'core/pixi.js' , 'core/tween.min' , 'preloadjs' , 'soundjs' ]
, function(MainGameScene , Runner , PIXI, TWEEN , PreloadJS , SoundJS)
{
  console.log("Endless Runner modules loaded.");

  var screenSize = { width : 960 , height : 500};
  var renderer = PIXI.autoDetectRenderer(screenSize.width , screenSize.height);

  new PIXI.loaders.Loader()
    .add("_assets/textures/p1_walk/Von.json")
    .add("_assets/textures/p2_walk/Don.json")
    .add("_assets/textures/p3_walk/Bon.json")
    .add("_assets/textures/tiles.json")
    .add("_assets/textures/textures.json")
    .once("complete" ,
      function()
      {
        var queue = new PreloadJS();
        SoundJS.alternateExtensions = ["mp3" , "ogg" , "wav" ];
        queue.installPlugin(SoundJS);
        queue.addEventListener("complete" , onFinishedLoading);
        queue.loadManifest(
          [
            {id : "bgm1"  , src : "_assets/bgm/bgm.mp3"}
           ,{id : "jump" , src : "_assets/sfx/jump.wav" }
           ,{id : "pickupcoin" , src : "_assets/sfx/pickupcoin.wav" }
          ]);
      })
    .load();

  function onFinishedLoading()
  {
    new MainGameScene(renderer , screenSize);
  }

  document.body.appendChild(renderer.view);
});

When I run the debugger it shows me that the PreloadJS object has this properties which I believe is not part of PreloadJS. I also checked if the prototype is correct but I am having Object as its prototype:

noConflict: function()
parse : function parse()
runInContext : function a(b, d)
stringify : function stringify()
__proto__ : Object

What else did I miss? Also I tried to shim PreloadJS like this:

    'preloadjs' : { exports : "createjs.LoadQueue" }
  , 'soundjs'   : { exports : "createjs.Sound" }

But I still get an object with those properties. I need RequireJS so I can have my SoundJS with a solid preloader. I cannot find any articles of using PreloadJS with RequireJS so definitely I believe I am doing something wrong, unconventional and undocumented so I will appreciate any help.

Sounds like the JSON class, which is bundled in PreloadJS is causing issues. — Lanny, Nov 08 '15 at 23:03
I'm having this exact same issue right now. Did you find a fix yet? If I find one I'll be sure to post it here. — dudewad, Nov 20 '15 at 00:51
I opened an issue: https://github.com/CreateJS/PreloadJS/issues/171 — dudewad, Nov 20 '15 at 21:12
@Lanny where do you get that assumption? Can you please shed some light? You mean from the stringify method on the returned object? — dudewad, Nov 20 '15 at 23:28

score 3 · Accepted Answer · answered Nov 23 '15 at 21:25

Okay, got it worked out. It's less than ideal but preloadjs is not written with AMD in mind. If your project absolutely requires you to include your dependencies via bower or something than this might be sub-optimal but in the face of absolutely no other fix I'm pretty content with this.

Basically, take your version of preloadjs, and wrap the entire file in a define() call:

define(function(){
    //Paste the contents of preloadjs here
    //After all the preloadjs code you need to return the reference to createjs:
    return this.createjs
});

Add this version to your dependency list and everything should work as normal.

The shimming solution worked fine for 0.4.x, but since 0.6.x it seems your solution is necessary. Not perfect, but better than nothing. — Micros, Dec 06 '16 at 16:31

Loading PreloadJS using RequireJS

1 Answers1