Can anyone make a TypeScript definition file for Pixi?

[clark]

I hope to have something online soon but I am guessing really with the definitions as I have never written one, does anything think they can put together a Pixi.d.ts file?

Cheers!

[Ezelia]

not up to date with latest pixi version but usable for almost all cases

https://github.com/xperiments/Pulsar/blob/master/src/libs/pixi.d.ts

[HappinessSam]

Talking of pixi.js + typescript, I've been trying some of the examples but Typescript is throwing a fit with the window.requestAnimFrame method. Is there any easy way around this?

[Hsaka]

Hi, you could probably try something like this:

 

module PixiTest {    declare var PIXI: any;    export class Test {        private stage;        private renderer;        private bunny;        constructor() {            // create an new instance of a pixi stage            this.stage = new PIXI.Stage(0x66FF99);            // create a renderer instance            this.renderer = PIXI.autoDetectRenderer(400, 300);            // add the renderer view element to the DOM            document.body.appendChild(this.renderer.view);// add the renderer view element to the DOM            requestAnimationFrame(this.animate.bind(this));            // create a texture from an image path            var texture = PIXI.Texture.fromImage("bunny.png");            // create a new Sprite using the texture            this.bunny = new PIXI.Sprite(texture);            // center the sprites anchor point            this.bunny.anchor.x = 0.5;            this.bunny.anchor.y = 0.5;            // move the sprite t the center of the screen            this.bunny.position.x = 200;            this.bunny.position.y = 150;            this.stage.addChild(this.bunny);        }        private animate() {                        // just for fun, lets rotate mr rabbit a little            requestAnimationFrame(this.animate.bind(this));            this.bunny.rotation += 0.1;            // render the stage               this.renderer.render(this.stage);                    }    }}

[Mat Groves]

Great to see a typescript def file there  

 

I will add this to the actual pixi.js repository and update it when I have finished the bits i am currently working on!

 

great stuff!

[HappinessSam]

Thanks for the def I found one here: https://github.com/natelong/pixi-ts-def/ but your one is much better.

 

They're both missing AssetLoader.load() though, which is also missing from the documentation but is used in the MovieClips example and is in the src AssetLoader.js file. I added it to the def file myself and it seems to run correctly but is this something that I shouldn't be accessing or is it an oversight?

 

I got round the requestAnimation frame with the hidieous hack

window["requestAnimFrame"](this.animate.bind(this));

[Mat Groves]

Nice one! ah yes the the load function should be in docs! good catch I will need to update them...

 

Good to hear its working ok now too!

[HappinessSam]

Ah, you're Mat Groves? Wow.

If you're looking at docs, the other thing that confused me was that in the examples autoDetectRenderer is used as a Static function of the PIXI module, but in the docs it's only referenced as a static of the DisplayObject. Maybe javascript scopes stuff so it's not an issue, but the definition file I was initially using (which as I said isn't great) was going by the docs, so it was throwing compile errors.

 

Another annoying thing I've found relevant to using  PIXI in Typescript is that Visual Studios doesn't seem to copy my json files into the localhost folders when I build the project, so I have to compile, then directly open the page from the folder to test. I can't work out how to change the config to get it to include the json file. Has anyone else run into this?

[clark]

Thanks for your help everyone!

I am a newbie but I have also seen preserving scope with => in the constructor? No idea what is happening here but it works.

Something like this?
 

class Main{    constructor()    {                  this.animate: (): void =>         {              requestanimationFrame(this.animate);         }     }    private animate(): void;}

Also personally thanks Mat, Pixi is great and TypeScript recognition even better

[clark]

Guys in the mean time, 

 

In a definition file, is it just the public methods and public properties that go into it?

[Mat Groves]

Ah, you're Mat Groves? Wow.

If you're looking at docs, the other thing that confused me was that in the examples autoDetectRenderer is used as a Static function of the PIXI module, but in the docs it's only referenced as a static of the DisplayObject. Maybe javascript scopes stuff so it's not an issue, but the definition file I was initially using (which as I said isn't great) was going by the docs, so it was throwing compile errors.

 

Another annoying thing I've found relevant to using  PIXI in Typescript is that Visual Studios doesn't seem to copy my json files into the localhost folders when I build the project, so I have to compile, then directly open the page from the folder to test. I can't work out how to change the config to get it to include the json file. Has anyone else run into this?

 

Nice one HappinessSam! Sorry about that, I will add these issues to my todo list. To be honest I havn't done much typescript yet :/ But I plan on using it for my next project as it looks really great. Hopefully at that point I will be able to crack an major pixi.js / typesript issues at the same time if any pop up. 

[Mat Groves]

Guys in the mean time, 

 

In a definition file, is it just the public methods and public properties that go into it?

 

That sounds about right to me! Let me know how it goes

[clark]

Using the docs as a guide and looking through the js, Working from bottom to top, I hit line 163 on Sprite here  but not sure what is happening with those events as they appear to come from no where when I consult the JS.  I really need to try putting this => stuff into perspective!

[sneakyfildy]

So, what's with up-to-date typescript definition?

[JFX]

Hey Guys!

 

Great work from you here.

 

And I'm interested in an updated file as well! Any news?

[clark]

Just to update this old post. 

As far as I am aware. A.Lamboley had the most complete definition along with examples. 

https://github.com/alamboley/pixi.js

That was a few months ago. 

I am working on updating the definition which will be here: 

https://github.com/clark-stevenson/pixi.js/blob/master/TypeScript/pixi.d.ts

But I am far from confident. If you use it, expect problems!