pixi.js + pixi-ui.js

[clifftm]

Hello.

I studied Pixi when it was 4v and took a break. Now it's v5, and i want release my dream in using pixi.js+vue-cli. If you don't want to read all my steps, just read last clause in the post ?

So first of all i've did that

• installed npm
• npm install -g @vue/cli
• vue create my-project

The vue-cli 4.4.1 has such structure:

• node_modules
• public
  • libs
    • pixi.js
  • index.html
• src

I'v tried to install pixi.js in 2 ways:

• just put pixi.js in public/libs and insert it to index.html. As a result in .vue\.js files i can use PIXI without any imports. But popup messages with available PIXI functions are not available
• npm i pixi.js and then write import * as PIXI from 'pixi.js' => I .vue\.js files i have to write import, but now i'v see a help popup messages

I choose 2 way

I make a simple scene with pixi, using spritesheet atlas, tillingsprite's and everything is working. The next step for me is insert input field to the page. I went to https://github.com/pixijs/pixi.js/wiki/v5-Resources and tried to use pixi-ui.js with that example:

    let app = new PIXI.Application({
      resizeTo: window,
      view: document.getElementById("app-cvs"),
      antialias: true
    });
    const uxStage = new PUXI.Stage({
      width: 100,
      height: 100
    });
    let button = new PUXI.Button({
      text: "Hello world!"
    });
    button.setBackground(0xff);
    button.setLayoutOptions(new PUXI.FastLayoutOptions({
                width: 300,
                height: 200,
                x: 100,
                y: 100
            }));
    uxStage.addChild(button);
    app.stage.addChild(uxStage);

Btw, as you can see resizeTo: window is set. Is it a bad choice to make fullwindow canvas with full screen pixi application in it? Or it's better to make a lot of small canvas'es inside divs (for a ground, character and so on) ?

First method

• public
  • libs
    • pixi.js
    • puxi.js

    <script src="./libs/pixi.js"></script>
    <script src="./libs/puxi.js"></script>

npm run serve => exception TypeError: PUXI.Stage is not a constructor 

1 hour for find any fix and... you need to add this

    <script src="./libs/pixi.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@pixi/[email protected]/dist/filter-kawase-blur.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@pixi/[email protected]/dist/filter-drop-shadow.min.js"></script> 
    <script src="./libs/puxi.js"></script>

finally the button appeared on the screen.

Second method

• npm i puxi.js . it also installed filter-kawase and filter-drop 
• import * as PIXI from 'pixi.js'   and  import * as PUXI from 'puxi.js'

npm run serve => tons of exeptions like  error  in ./node_modules/puxi.js/lib/puxi.mjs Can't import the named export 'Texture' from non EcmaScript module (only default export is available)

30 minutes for find any fix and you need create vue.config.js with

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {   test: /\.mjs$/,
                    include: /node_modules/,
                    type: "javascript/auto"
                }
            ]
        }
    }
}

and even after that i'v got an error

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot redefine property: ticker
    at Function.defineProperty (<anonymous>)
    at Application.TickerPlugin.init (ticker.es.js?e3e9:775)
    at eval (app.es.js?568e:52)
    at Array.forEach (<anonymous>)
    at new Application (app.es.js?568e:51)
    at VueComponent.mounted (App.vue?234e:15)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)

and here i'm stucked.

As puxi.js worked via html so it should work and via "npm". 

What's a proper way to connect puxi.js with pixi.js via npm?

Edited June 12, 2020 by clifftm