How to use PIXI.js with Require.js?

[neonwarge04]

Hello,

I am trying to load PIXI.js through Require.js but it seems its not compatible. I am new to AMD/Require.js and I don't if I am doing the right thing.

 

Here is what I am trying to do:

require.config(  {    paths :    {      'pixi' : 'core/pixi.js'    }    , shim :    {      'pixi' : { exports : 'PIXI'}    }  });require(['src/MainGameScene' , 'src/Runner' , ''] , function(MainGameScene , Runner , PIXI){  console.log("Endless Runner modules loaded.");  var screenSize = { width : 800 , height : 600};  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")    .once("complete" ,      function()      {        new MainGameScene(renderer , screenSize);      })    .load();  document.body.appendChild(renderer.view);})

I load PIXI using the config attribute of require.

 

I have some modules loaded successfully and I thought loading PIXI, just like any JS library, could be as well so I don't have to tag load it. Have anyone try to load pixi.js with Require.js this way?

 

 

Thank you!

[xerver]

It exports for AMD, you don't need to use a shim.

 

You also don't require pixi in your dependencies either, make sure to do that as well.

[neonwarge04]

I see.

 

 I just have a little understanding of modules in javascript, and it seems there are few like Browserify, SystemJS, es6-module-loader etc. I am sticking with RequireJS to keep my code organize and modular as possible. Since the way I code with JS is that I separate each objects I require to their own file. I just realized the load times will be slow if I have multiple js files to load.

 

So here's what I did to make it work:

 

require(['src/MainGameScene' , 'src/Runner' , 'core/pixi.js' , 'core/tween.min'] , function(MainGameScene , Runner , PIXI)

{

  console.log("Endless Runner modules loaded.");

 

  var screenSize = { width : 800 , height : 600};

  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")

    .once("complete" ,

      function()

      {

        MainGameScene(renderer , screenSize);

      })

    .load();

 

  document.body.appendChild(renderer.view);

});

 

 

You also don't require pixi in your dependencies either, make sure to do that as well.

I don't quite understand what you mean by this though. Should I load the pixi.js through a <script> tag?

[xerver]

I don't quite understand what you mean by this though. Should I load the pixi.js through a <script> tag?

No, in the original post you didn't have pixi.js in the dependency list (that array of strings as the first param to require). requirejs only loads the things you specify in that list.

[Darker]

Hey, I just use it like this:

define(["pixi.min"], function(PIXI) {  function GameRenderer(width, height) {   ... something ...  }  ... more code ...  return GameRenderer;}

I didn't need to use require.config. I have all files in the same directory though.