Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

How to use PIXI.js with Require.js?


neonwarge04
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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