Jump to content

How to import Dragonbones inside Pixi.js (error PIXI is not defined)


Recommended Posts

Hello everyone ☺️,

I am new here but I have been using Pixi.js for several years.

I am currently working on a new project and have to use Dragonbones. Because I am writing a new project with modules and import / export classes.

I installed via npm Dragonbones and I tried to add a dragonbones animation object to the scene, but unfortunately the dragonbones gives me an error.

Here is the class where I'm trying to add Dragonbones object.

import { Container } from "pixi.js";
import BackgroundSprite from "./backgroundSprite";
import CloudSprite from "./cloudSprite";

// Dragonbones import
import dragonBones from 'dragonbones.js';

export default class BackgroundContainer extends Container {
    constructor(model, loader) {

        this._model = model;
        this._loader = loader;

        this._background = new BackgroundSprite(this._loader.getTexture("background"), this._model.stageWidth, this._model.stageHeight);
        this.pivot.x = this._model.stageWidth / 2;
        this.pivot.y = this._model.stageHeight / 2;
        this.position.set(this._model.stageWidth / 2, this._model.stageHeight / 2);

        this._cloud = new CloudSprite(this._loader.getTexture("cloud"));

        // Dragonbones part START
        const factory = dragonBones.PixiFactory.factory;
        factory.parseTextureAtlasData(this._loader.getResources("texture_json"), this._loader.getResources("texture_png"));

        const anime = factory.buildArmatureDisplay("Armature");
        // Dragonbones part END

    scaleToWindow(width, height, aspectRatio) {
        this.position.set(width / 2, height / 2);

And here is the error I'm getting:

Uncaught ReferenceError: PIXI is not defined
    at eval (dragonBones.js:15460)
    at eval (dragonBones.js:15462)

Do you have any idea what I'm doing wrong, and how to fix the situation that Dragonbones doesn't report the error that PIXI is not defined.

Thanks a lot in advance for your time and help. ☺️

Link to comment
Share on other sites

the usual for webpack users.


import * as PIXI from 'pixi.js';
window.PIXI = PIXI;

i dont know how to get dragonbones object fter require , maybe "var something = require('dragonbones.js');" 
The point is, PIXI has to be global, before dragonbones lib is loaded. this is because whoever supports it didnt move it to pixi-v6 nor es6 modules. Do you want to do it?

Link to comment
Share on other sites

Thanks for the quick response and advice. Unfortunately, I have already tried the recommendation you wrote, but without success. I ran out of ideas so I tried to look for advice here maybe someone will remember something that didn’t occur to me.

I will try a few more ideas if it fails I will consider the option to implement Dragonbones in es6.

Thanks again!

Link to comment
Share on other sites

Finally, after so much research and ideas, I came up with a solution that works very simply.

If you have problems with ES6 and Dragonbones (PIXI is not defined), just add to your webpack.common.js file:

const webpack = require('webpack');


plugins: [
	new webpack.ProvidePlugin({
		PIXI: 'pixi.js'

This is the right way to set a particular variable as globally available through the webpack.

I'm glad that now some can also find solution to this issue. ☺️

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