layers
layers copied to clipboard
How can I use this lib with ES6 import?
I'm trying to use this addon, but I'm getting errors like this one: DisplayGroup is not a constructor
when I try to import from pixi-display
.
How can I use it if there is no export statement?
Thank you
I don't know about ES6 target. My recommendation is not to use pixi and pixi-display as ES6 imports at all, only as global. If you know how to wrap it, modify "bin/pixi-display.js" the way you want it.
If you find the way it works, I'll try to modify TS source that way too.
Can you explain why it is recommended to use PIXI as a global variable?
Thank you!
By the way, I will try to make it work with es6 import/export :)
+1
Hi @lgraziani2712 ,
you could try import * as PIXI from 'pixi.js'; import 'pixi-display'; for expample... it works for me
also I used http://scottmcdonnell.github.io/pixi-examples/index.html?s=display&f=zorder.js&title=Z-order&plugins=pixi-display example
Doesn't it seem wrong that you should "have" to import PIXI as *, rather than just importing the pieces you need in that module?
Either way, I realized that I can achieve the same things I wanted to use this plugin for by just designing with more Containers, and gave up on trying to make it work with my setup.
you also could do like this import 'pixi-display'; import {DisplayGroup, DisplayList} from 'pixi.js';
Just put bin in your repo. It works!
you can require this js
let pixi_display = require('@/components/page/scene/pixi-layers')
//pixi-layers.js
(function (factory) {
if ( typeof define === 'function' && define.amd ) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS style for Browserify
module.exports = factory;
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var pixi_display
//some about pixi_display code
}))
Simply import 'pixi-layers'
and then new PIXI.display.Layer()
works.
FYI, you can do this to augment PIXI types with this lib's types too (requires typescript 3.8):
import * as PIXI from 'pixi.js';
import type {} from 'pixi-layers'; // typescript now knows about PIXI.display.Layer, etc.
globalThis.PIXI = PIXI;
require('pixi-layers');
I had some trouble setting up my dev environment. I am using webpack via Laravels mix configuration. The import instructions from the docs work for me excpet I get a lot of warning when compiling:
"export 'display' (imported as 'PIXI') was not found in 'pixi.js'
Anyone know how to avoid those warnings?