Jump to content

pixi.js + pixi-ui.js


Recommended Posts


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.setLayoutOptions(new PUXI.FastLayoutOptions({
                width: 300,
                height: 200,
                x: 100,
                y: 100

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 by clifftm
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...