Open DennisSmolek opened 7 years ago
Yes, we solved that problem for pixi-spine, and its time to move it to pixi-display. Use modified ".d.ts", its ok.
Hi guys, can you detail a bit on how do we make it work with typescript? Im interested too :)
You have to modify "bin/pixi-display.js" or "bin/pixi-layers.js" file. remove "typeof" thing and change all modules to "PIXI.tilemap"
Or you can just use "pixi_display.DisplayGroup" instead of "PIXI.tilemap" when you define a field with specific type
Thanks ivan for the infos, but can we rollback a little? Im a newcomer in the PIXI community and im also a rookie in term of typescript.
I initially wanted to use the pixi-layers plugin who seem to be encapsuled inside the pixi-display plugins right? I'm asking this because you were talking about the pixi-tilemap.
ps: Im not even clear on how I am supposed to install a plugin in PIXI, is there a npm package for PIXI-display or Im forced to install it manually?
Sorry, my mistake :)
How to install pixi-layers:
///<reference path="path_to_ts/pixi-layers.d.ts">
to one of your ts files.You can see pixi-layers plugin, but there's one problem:
let layer = new PIXI.display.Layer(); //that will work
let x : PIXI.display.Layer = layer; // that wont :(
let x : pixi_display.Layer = layer; //that will work
Solution to that problem was applied to pixi-spine, but not pixi-display
Thanks ! It's clear for me 👍
Im gonna try it soon and I'll come back if it's needed :)
I just modified the core pixi.js.d.ts file and included the pixi_display classes/changes It's a hack I know but I'd rather adjust one or two .d.ts files than all my code. This way let x: PIXI.display.Layer
works as expected, and when a more solid Typescript definition rolls around I can switch.
ok, that works too :)
Hey guys I still have an issue :
In Typescript I used PIXI this way :
import * as PIXI from 'pixi.js';
But the PIXI
reference is different of the window.PIXI
and PIXI.display
exist only in window.PIXI
What is my mistake?
will that work? You'll have display as separate module that way
import * as pixi_display from 'pixi-display.js'
I was able to import PIXI from pixi_display but it dropped all the definitions from the core pixi.js
version. It's setup right to Augment the main PIXI module but I couldn't get TS to do it.. You can import pixi_display
but then when you call PIXI.display.Layer
or anything on the display
it throws that it doesn't exist..
I couldn't figure it out...
You have to import PIXI from pixi and pixi_display from pixi-display, "pixi_display.Layer" must work
You have to import PIXI from pixi and pixi_display from pixi-display, "pixi_display.Layer" must work
Yes, this works when I reference something like:
var myLayer: pixi_display.Layer
but this throws an error
var myLayer: pixi_display.Layer = new PIXI.display.Layer()
what about that?
var myLayer: pixi_display.Layer = new pixi_display.Layer()
I'm sorry about your problems, we are going to port "pixi-spine" solution in this repo. It supports vanilla and browserify and webpack.
You can use modified ".d.ts" for now :)
No worries, that's what I figured, I kept getting weird errors so it was actually faster to just merge your .d.ts
with the core one and wait for the fix down the road
Would love to see Layers working out of box with TypeScript, NPM, Webpack and ES6 module imports.
@jlost it should be pretty straightforward now.
npm i pixi.js @types/pixi.js pixi-display --save
import "pixi-display"; // import for side effects, need to be done once in `src/index.ts`
import * as PIXI from 'pixi.js';
const greenGroup = new PIXI.display.DisplayGroup(0, false);
does that really work?
Or in case of pixi-layers
(publish it to the npm, please):
npm i pixi.js @types/pixi.js https://github.com/pixijs/pixi-display/tarball/layers --save
import "pixi-layers"; // import for side effects, need to be done once in `src/index.ts`
import * as PIXI from 'pixi.js';
const greenGroup = new PIXI.display.Group(0, false);
oh, nice :) I'll add that to README! You really solved it!
I saw in #5 you were referring to what's happening with the core library but in the meantime I can't for the life of me get my project to let your Augments work... I can pull in
pixi_display
but it won't merge up with the core PIXI namespace.For the moment I'm manually adjusting a .d.ts file but I didn't know if you had a trick to get it to work