Jump to content

How should one load PIXI.js APIs/Extensions?


Recommended Posts

Hi everyone!

I have been doing a lot of work with PIXI.js, and it is an absolute wonderful engine. However, I have had trouble with loading extra APIs such as pixi-display and pixi-multistyle-text synchronously in the head tag. I have managed to fixed the issue by loading the extensions once the document was fully loaded effectively inserting an extra asynchronous step, and then running the whole program. I was wondering if anyone had a better solution?

Right now it is like this: load pixi.js and all document -> load pixi-display and all other apis -> run javascript

And preferably, i was wondering if it would be possible to load pixi.js and pixi-display all together -> run javascript once document loaded

Link to comment
Share on other sites


You have many way to perform thats 
You will maybe get better response from other , but you can example do it with a document onload.

        const javascript = [
            //all pixi extention
        const css = [
            // all css if need
        const onComplette = () => $app.start();
        const head = document.getElementsByTagName('head')[0];
        let total = javascript.length + css.length;
        for (let i = 0, l = css.length; i < l; i++) {
            let link = document.createElement('link');
            link.onload = function() {
                !total && onComplette();
           // link.async = false;
            //tmp = link.cloneNode(true);
            link.href = css[i];
            link.rel = 'stylesheet';
        for (let i = 0, l = javascript.length; i < l; i++) {
            let script = document.createElement('script');
            script.onload = function() {
                !total && onComplette();
            script.async = false;
            script._url = javascript[i];
            script.src = javascript[i];
            script.href = javascript[i];

or if you use a app you can also use html


<!DOCTYPE html>
        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="user-scalable=no">
        <link rel="icon" href="icon/icon.png" type="image/png">
        <link rel="apple-touch-icon" href="icon/icon.png">
        <link rel="stylesheet" type="text/css" href="fonts/gamefont.css">
        <!--CORE UTILITY Graphics.isFontLoaded("ArchitectsDaughter")-->
    <body style="background-color: black; overflow: hidden; margin: 0px;">
        <!--CORE UTILITY-->
        <script type="text/javascript" src="js/utility/ECC.js"></script>
        <script type="text/javascript" src="js/utility/pixiMapEditor.js"></script>

        <!--PIXI && Other-->
        <script type="text/javascript" src="js/core/polyfill.js"></script>
        <script type="text/javascript" src="js/libs/papaparse.js"></script>
        <script type="text/javascript" src="js/libs/pixi.js"></script>
        <script type="text/javascript" src="js/libs/pixi-tilemap.js"></script>
        <script type="text/javascript" src="js/libs/pixi-picture.js"></script>
        <script type="text/javascript" src="js/libs/pixi-filters.js"></script>
        <script type="text/javascript" src="js/libs/pixi-layers.js"></script>
        <script type="text/javascript" src="js/libs/pixi-lights.js"></script>
        <script type="text/javascript" src="js/libs/pixi-spine.js"></script>
        <script type="text/javascript" src="js/libs/pixi-projection-spine.js"></script>
        <script type="text/javascript" src="js/libs/pixi-heaven.js"></script>
        <script type="text/javascript" src="js/libs/TweenMax.js"></script>
        <script type="text/javascript" src="js/libs/TimelineLite.js"></script>
        <script type="text/javascript" src="js/libs/EasePack.js"></script>
        <script type="text/javascript" src="js/libs/pixi-zero.js"></script>

Wait from other people to get more tricks .... :)

Link to comment
Share on other sites

@jonforum Thank you for the reply! I have been using document.onload as well (and a similar function to yours too), but it makes the code very dense (and the page slightly slower) and have too many callbacks (have to track each api and when everything is done, then start the script). I think the solution I am looking at is have pixi.js and the apis in <head>, then modify the pixi-display.min.js file to delay the loading, and in document.onload have a function that loads it all. I thought this wasn't a developer friendly way at all, and pixi.js has been very developer friendly so I thought i was doing it the hard way! 

Maybe someone has a better trick!

Link to comment
Share on other sites

you can also use node `npm` in terminal for install all `dependencies` and module for your web app.
and it managed from `package.json`.
You can find video tutorial about how setup this ways.
This way will manage all automatically, but i dont like it, am a old dinosaur....

Link to comment
Share on other sites

@jonforum Here is what i don't understand: but at the end of the day, on the client side, we have to load pixi.js from the html and even having installed pixi.js and pixi-display from npm, they will also be needed to be loaded from html <script> which ends up with the same problem :( 

Link to comment
Share on other sites

hum .. I am not an expert but the tests on my side worked.
you need play with import
And also setup your server side for debug , ex: me i use nwjs with vscode for distribution and debugging

        "version": "0.1.0",
        "configurations": [
                "type": "nwjs",
                "request": "launch",
                "name": "nwjs Node debug",
                "runtimeExecutable": "${workspaceRoot}\\nwjs-sdk\\nw.exe",
                "runtimeArgs": [
                "webRoot": "${workspaceRoot}",
                "port": 9222,
                "reloadAfterAttached": true,
                "sourceMaps": false,
                "nwjsVersion": "any",
                "type": "nwjs",
                "request": "attach",
                "name": "Attach to NWjs",
                "port": 9222,
                "webRoot": "${workspaceFolder}",
                "reloadAfterAttached": true,


you also need a jsconfig.json 

    "compilerOptions": {
        "target": "ES6"
    "exclude": [

But am not a pro ... and i dont know if you can get more deep help from here , maybe more luck on https://stackoverflow.com/

Link to comment
Share on other sites

good news I have found the perfect solution!!!!!!!!! I didn't know about this feature in HTML5 but there is a thing called "defer" and "async". Apparently all script tags with async will be run whenever they are loaded whilst the script having defer tag will be run in order AFTER all document is parsed and BEFORE document.onload. Hence the solution is:

    <!--Code that doesn't care about order-->
    <script src="/lib/skills.js" async></script> 

    <!--Code that cares about order-->
    <script src="/pixi/pixi.min.js" defer></script>
    <script src="/pixi/pixi-layers.js" defer></script> 

  @jonforum thank you for giving me a hint with the import and finding this absolute gem!!!!! To hell with the extra document onload loader :D

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.

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.


  • Recently Browsing   0 members

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