pixijs / pixi-typescript

Typescript definitions for Pixi.js

Typescript Definitions for Pixi.js v4.x

Note This repository is not intended for v5.x which ships with its own generated declarations.

When using v5.x, you can use import * as PIXI from "pixi.js" without the need for @types/pixi.js

Install

The recommended install is from DefinitelyTyped using:

npm install @types/pixi.js --save-dev

This repository contains the most recent version of the declarations for pixi.js and follows the v4.x branch with periodical Releases which are supposed to match pixi releases by the core team.

Each release is pushed to DefinitelyTyped.

Any advice, suggestions or improvements would be appreciated.

pixi-typescript's Issues

404 not found - demo example 3 console errors

Errors on the console:

pixi-compressed-textures.js:100 Uncaught ReferenceError: src is not defined
at CompressedImage.loadFromArrayBuffer (pixi-compressed-textures.js:100)
at pixi-compressed-textures.js:514
at MiniSignal.dispatch (mini-signals.js:93)
at Resource.complete (Resource.js:364)
at Resource.abort (Resource.js:402)
at Resource._onError (Resource.js:673)

/examples/required/assets/compressed/buildings.json Failed to load resource: the server responded with a status of 404 (Not Found)

pixi-compressed-textures.js:100 Uncaught ReferenceError: src is not defined
at CompressedImage.loadFromArrayBuffer (pixi-compressed-textures.js:100)
at pixi-compressed-textures.js:514
at MiniSignal.dispatch (mini-signals.js:93)
at Resource.complete (Resource.js:364)
at Resource.abort (Resource.js:402)
at Resource._onError (Resource.js:673)

No external module?

The PIXI module does not appear to be declared external, and when referencing it, I am unable to import it. Also, the module name does not match the npm module name ("PIXI" vs. "pixi.js"), so after compiling the TypeScript, the compiled JavaScript references "PIXI", where npm references "pixi.js". I have fixed this in my own code by changing the module to be external and use the same module name as npm:

declare module "pixi.js" {

    export function autoDetectRenderer(width: number, height: number, options?: RendererOptions, noWebGL?: boolean): WebGLRenderer | CanvasRenderer;
    export var loader: loaders.Loader;

And referenced in my code:

/// <reference path="../node_modules/pixi-typescript/pixi.d.ts" />
import PIXI = require('pixi.js');

I'm not terribly experienced with TypeScript yet, so if I have missed something, and this is the wrong solution, please let me know. Thanks.

Allow AbstractFilter as shader

I didn't open a pull request for this yet, as I'd like to hear from someone more knowledgeable about Pixi first.

Sprites etc. work fine when you assign a filter (AbstractFilter descendant) to their shader property. From what I can understand, extending AbstractFilter is in many cases easier than writing a custom shader. Is there any technical reason to not want to do this?

If there isn't, then it should be allowed using Shader | AbstractFilter instead of just Shader, here: https://github.com/pixijs/pixi-typescript/blob/master/pixi.js.d.ts#L874 (and the other descendants of Container that allow for shaders to be set)

Merge with Pixi.js

Issue brought up in #58, moving forward, we should move the PIXI typings to the main pixi.js repo. That way the typings get locked to the distributed version of the library. Also, would ensure that when developers make PR against pixi.js that change the API, they would also need to make the corresponding API change in the typings. Thoughts?

Documentation

pixi.js.d.ts should contain JSDoc from the pixi.js

RGBSplitFilter attributes are PIXI.Point, not number

    export class RGBSplitFilter extends AbstractFilter {
        red: number;
        green: number;
        blue: number;
    }

should be

    export class RGBSplitFilter extends AbstractFilter {
        red: PIXI.Point;
        green: PIXI.Point;
        blue: PIXI.Point;
    }

https://github.com/pixijs/pixi.js/blob/master/src/filters/rgb/RGBSplitFilter.js

Seems to be a bit behind Pixi

For instance, according to the latest Pixi docs, you can now use a PixiRenderer to render any Container, not just a Stage. However, this is not allowed by these definitions.

Additionally, DisplayObjectContainer has been renamed to Container.

I'd be happy to help, but I'm not quite sure which version of Pixi this is up to date with.

There is an ES6 version , why do we need a TypeScript version?

TypeScript is very like ES6 , why do we need a TypeScript version?

Add plugins attribute

Would be nice to support plugins, such as:

renderer.plugins.interaction

Cheers!

Add Mapped Types or make everything public?

Discussion here

Having trouble with pixi typescript and require

I'm having trouble with requirejs, pixi and typescript right now. My idea was to have RequireJS for development, not caring about extra builds and such, and when i'm building a release, use browserify to build it.

The issue i'm having is that when i'm requiring the module named "pixi.js" with RequireJS it thinks it's a .js file, and therefore looking in the project root for the file. And it's not there. A solution is to change from "pixi.js" to "pixijs" or plain "pixi"(this includes require config and changing in the pixi.d.ts file), but then i cannot build with browserify as it is looking for pixi in the node_modules folder.

Do any of you have any experience with RequireJS or might figure out a solution here?

The require config looks something like this:

    require.config({
        baseUrl: "../",
        paths: {
            "socket.io-client": "./node_modules/socket.io-client/socket.io",
            "webfontloader": "./node_modules/webfontloader/webfontloader",
            "pixi.js": "./node_modules/pixi.js/bin/pixi"
        }
    });
    require(['index'], function (Program) {
        var program = new Program();    
    });
´´´

hitArea not defined

Hello,

In the InteractionManager.prototype.processInteractive function, there is a test against the display object's hitArea. There is no other reference to it, but it should probably be on the DisplayObject's definition. I use this for restricting from where events are raised on a sprite.

static SpriteFromPoints(renderer, graphics, points, bounds, isInteractive): PIXI.Sprite {
        var polygon = graphics.drawPolygon(points);
        var zoneSprite = new PIXI.Sprite(polygon.generateTexture(renderer, 1, (<any>PIXI).SCALE_MODES.DEFAULT));
        zoneSprite.position.x = bounds.x;
        zoneSprite.position.y = bounds.y;
        zoneSprite.interactive = isInteractive || false;
        if (zoneSprite.interactive) {
            (<any>zoneSprite).hitArea = new PIXI.Polygon(points);
        }
        return zoneSprite;
    }

Version 4 Support?

PIXI.BaseTexture source

Hi!
Can you please change line 976 (PIXI.BaseTexture.source) from
source: HTMLImageElement | HTMLCanvasElement;
to
source: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement;

PIXI.VideoBaseTexture extends PIXI.BaseTexture. So if you want access to the source of VideoBaseTexture it will throw an error.

Thanks a lot!

Unable to override UpdateTransform as many variables are private, not protected

I was going to override the updateTransform method in DisplayObject, but many variables were being marked as unfound, as they are marked as private, not protected.

The ones being marked as error were:
rotationCache
_sr
_cr
_currentBounds

Shouldn't most, or at least some member variables be marked as protected? Or are this a special case where it would be better to make new variables to replace them?

What i was doing was adding skewX and skewY functionality.

Property 'addPixiMiddleware' does not exist on type 'typeof Loader'.

Attempting to use PIXI.loaders.Loader.addPixiMiddleware function (found here) but it produces the error in the title.

Seems like the TypeScript definition is defining Loader as the one in the Resource Loader project (which the pixi Loader extends).

Graphics destroy method

Should Graphics destroy method have options?: IDestroyOptions | boolean param?

Code and definitions mismatch.

js:

Graphics.prototype.destroy = function destroy(options) {
        _Container.prototype.destroy.call(this, options);
[...]

d.ts:

destroy(): void;

Problem with using pixi.js module with typescript ... getting error about module augmentations

Hi. I am very new to typescript and and struggling to understand how to get the Pixi.js node module to work in my test project. I'm playing around with an angular2 seed project (https://github.com/angular/angular2-seed) and added a Pixi reference (added a new component that tries to import pixi.js) to see if I could get it to work.

So I installed the typings like so:

typings install pixi.js=github:pixijs/pixi-typescript/pixi.js.d.ts#08306a3

Then I have a file "pixiExp.ts" where I refer to the pixi.js module. I do the following:

import * as PIXI from 'pixi.js';
... other stuff here ...
renderer = PIXI.autoDetectRenderer(256,256);
...

It seems to work. But I'm getting a compilation error with regards to the typing definition for pixi:

ERROR in [default] /Users/dnassler/dev/angular2/angular2-seed-pixi/typings/browser/definitions/pixi.js/index.d.ts:1856:4 
Exports and export assignments are not permitted in module augmentations.

The error has to do with the following (where line 1856 is the line with the "export =" statement):

module 'pixi.js' {
    export = PIXI;
}

Maybe an irrelevant detail is that I have another "import 'pixi.js'" in a vendor.ts file elsewhere in the project. I don't think that is relevant to the problem but I just thought I'd mention it. Something else to note is that this project is using webpack but that is irrelevant to the specific issue/error I'm getting I think.

Some other details that are irrelevant to the problem but that were necessary for me to get the angular2-seed project to compile with pixi.js.... I had to npm install transform-loader and modify the webpack.config.js file as indicated here https://gist.github.com/mjackson/ecd3914ebee934f4daf4 . In particular I had to add a postLoaders config that uses the transform-loader to handle some "fs" related compile errors. But this is irrelevant to my problem :)

Does anyone have any ideas? I'm new to typescript so possibly I'm doing something very dumb?

Thanks for anyone's help!

Mesh constructor uvs,vertices and indices types mismatch

Mesh constructor types mismatch

constructor(texture: Texture, vertices?: number[], uvs?: number[], indices?: number[], drawMode?: number);

vertices should be Float32Array
indices should be Uint16Array
uvs should be Float32Array

HTMLElement || HTMLCanvasElement

Hello

Should line 749 reference the 'view' as an HTMLElement rather than HTMLCanvasElement?

export interface IRendererOptions {
view?: HTMLElement;

Thanks

Lex

PIXI.sound typings?

I'm new to typescript... have all the main PIXI.js stuff working with webpack etc. but PIXI.sound isn't turning up. What's the process look like for getting that working?

Add HTMLVideoElement type to BaseTexture.source

Hello,
I'm attempting to use a example VideoBaseTexture.baseTexture.source, but source hasn't type HTMLVideoElement for Video tag, it can be type HTMLImageElement | HTMLCanvasElement only.

Sorry for my English!
Thanks!

Tool Assistence

I threw this together the other day, I wonder if there is a good way to use that here?

https://github.com/englercj/tsd-jsdoc

Need some git help.

I have kind of ended up a bit lost here.

The v4 branch is the default now, which is what I want, but, I think really what I want, is for master to be v4, and then the current master to be v3.

npm install github:pixijs/pixi-typescript#4.1.0

But it doesn't work which isn't great and I don't really have a clue.

This is a temporary fix until TypeScript2.0 is settled. Right now the typings/dt/@type thing is a mess, and tooling support for 2.0 is still lame. But I want to get rid of all this stuff.

Anyway any guidance would be appreciated on how to clean this up a bit in the mean time.

😸

Typings install installs old type definitions

I'm attempting to install these type definitions in my project using typings.

However typings install dt~pixi.js --global installs this outdated type definition.

Is there anything we can do about this?

Fix Test point.clone() fails.

This line is broken on tests and is related to this PR

add Optionnal parameters to TilingSprite Constructor

I noticed from the tilingSprite class they have optional parameters for the constructor

those optional parameters are width and height.
`

  PIXI.TilingSprite = function(texture, width, height)
   {
   PIXI.Sprite.call( this, texture);

/**
 * The with of the tiling sprite
 *
 * @property width
 * @type Number
 */
this._width = width || 100;

/**
 * The height of the tiling sprite
 *
 * @property height
 * @type Number
 */
this._height = height || 100;

`

Actual DefinitionFile
constructor(texture: Texture, width: number, height: number);

Proposed change
constructor(texture: Texture, width?: number, height?: number);

PS : BOTH v2 and v4 tilingSprite are REALLY similar for most of them.

TilingSprite `From`

TilingSprite extends Sprite. Both have a static from.

I have no idea how to handle this yet, so taking a note:

https://github.com/pixijs/pixi-typescript/blob/v4.x/pixi.js.d.ts#L1396

Test of full conversion with bunnies.

Its here: https://github.com/pixijs/pixi-typescript/tree/secret-project

@clark-stevenson I need your expertise, I cant do that alone.

We have to convert all the relevant parts to test it with "bunny" demo which will be provided by @GoodBoyDigital .

I already tried conversion to Kotlin, so it must look like https://github.com/pixijs/pixi-native as a result.

If our demo will be faster than current pixijs-v4 , then we can have full official conversion :)

In the future, other plugins will be included in the same repo, and we just built different sets of "ts" files.

npm @types/pixijs

Hello,
Have you planned to merge in https://github.com/DefinitelyTyped/DefinitelyTyped/tree/types-2.0/pixi.js because when you do npm @types/pixijs, it's always the version 3.0
Best regards

Typings for event handlers

Just curious why they've been commented out.

Cant compile pixi.js.d.ts

I can't seem to compile the pixi.js.d.ts file from this repository. I'm using grunt-ts 5.5.1 which by default uses the typescript 1.8.9 compiler which gives me 45 syntax errors. I thought that maybe it was an issue with the compiler version so I changed the grunt-ts config to use the latest typescript compiler and got 450 errors. My question is what compiler version should I be using.

Variable "dirty" in class Text missing

Hi! Please add the boolean variable "dirty" for the Text class. Line 894. Thanks a lot!

TS2339 When accessing protected inherited property after checking if "this instanceof someClass"

I'm getting "TS2339 TypeScript Property does not exist on type." when I try to access an inherited protected property in a conditional that checks if current class is an instance of some class in the inheritance chain. For example:
if (this instanceof SomeChildClass) { this.someBaseClassProtectedProp = someNewValue; }
This results in the following error:
Error TS2339 Property 'someBaseClassProtectedProp' does not exist on type 'this & SomeChildClass'

This only happens if the property is protected instead of public. For now, I can prevent this error by rolling back to definitions for Pixi.js 4.3.4.

BitmapText fonts

Please add "static fonts:any;" to "export class BitmapText extends Container".

Cannot assign to 'SCALE_MODE' because it is a constant or a read-only property.

There's currently an issue with settings properties in that you cannot assign to them, for example:

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

Doing so results in the following error:

Cannot assign to 'SCALE_MODE' because it is a constant or a read-only property.

CanvasSpriteRender / CanvasSpriteRenderer

When adding all the things you see in #63, i also noticed something strange.

CanvasSpriteRenderer is a new class, which has been added to v4, and in the module system in the JavaScript, it is called CanvasSpriteRenderer. But when it is exported to the global object, it is suddenly CanvasSpriteRender (without the last "er"): https://github.com/pixijs/pixi.js/blob/b9d6badf9c4805494c43aed96fee9229da0dc659/src/core/index.js#L26
But the declaration file states that it is CanvasSpriteRenderer (with the extra "er"), which is not the name it is given when exported to the PIXI object.

So there is an error, but I'm not sure where it should be fixed. There are 2 options.

1: Change CanvasSpriteRenderer to CanvasSpriteRender in the decaration file.
2: Change the JavaScript file, so that the exported class is CanvasSpriteRenderer instead of CanvasSpriteRender. (This is the one that I prefer).

Getter and setter for Text.style

There's a strange type issue in Text's style property due to how its getter and setter work:

• When you set a Text object's style property, you may pass it a partial TextStyle object (which this library calls TextStyleOptions), which is the same as a TextStyle except that all of its fields are optional. Pixi will then expand this into a full TextStyle object as part of the setter.

• When you get a Text object's style property, it simply returns the TextStyle object.

Thus, a correct definition should look something like this:

class Text extends Sprite {
    // ...
    set style(sty: TextStyleOptions);
    get style(): TextStyle;
}

However, TS allows neither getter and setter declarations nor getters and setters with disagreeing types.

The current solution to this in pixi-typescript is that the style field is typed as TextStyle, which means that you need to work around it a bit to get an assignment to typecheck:

// Create text object
let text = new PIXI.Text("Hello world!", { fontFamily: "Arial", fontSize: "20px" });

// Problem: we'd like to do this, but it doesn't typecheck.
text.style = { fontFamily: "Roboto", fontSize: "24px" };

// Solution 1: call the TextStyle constructor before passing.
text.style = new PIXI.TextStyle({ fontFamily: "Roboto", fontSize: "24px" });

// Solution 2: add a type assertion.
text.style = { fontFamily: "Roboto", fontSize: "24px" } as PIXI.TextStyle;

This is annoying, but I'm not sure if typing it as TextStyleOptions would really be any better; it would be nicer for assignment, but potentially much worse when using the getter to operate upon it (since it's now missing the styleId field and its methods, and the remaining fields are all optional when they shouldn't be). Unfortunately, after reading some of the getter- and setter-related issues on the TS repo, it sounds like allowing these to have different types is impossible as getters and setters are modeled in the typesystem as properties and not as methods.

Thoughts?

A Basic ES6 Module Question

Please take a look at Andrews awesomely clean file. (I am still so happy to see ES6)

At the top are two variables.

const SharedTicker = core.ticker.shared;
const DEFAULT_UPLOADS_PER_FRAME = 4;

But they are outside of the Class which is the default export.

From a TypeScript perspective, are these hidden from view? I mean on the class, you have private/protected/public and really you need to add them all. But, these consts, and other functions at the same level of the class, I am not sure if I just ignore them?

Publish to http://definitelytyped.org

tsd install pixi --save installs outdated (v1.3) pixi definitions.

I'd love to see definitions for pixi 2.x and 3.x on http://definitelytyped.org/tsd/

My workaround for now is:

git submodule add https://github.com/pixijs/pixi-typescript.git typings/pixi
tsd rebundle

No MovieClip in extras

Namespace 'PIXI' has no exported member 'IRendererOptions'.

Since the #149 commit I get some errors in our project.

browserify precompile: node_modules/@types/pixi.js/index.d.ts(23,82): Error TS2694: Namespace 'PIXI' has no exported member 'IRendererOptions'.

To temporary solve the issue I had to downgrade pixi and pixi-typescript to v 4.3.1.

Container's destroy update

This line needs to be updated to reflect Containers new destroy API:
https://github.com/pixijs/pixi-typescript/blob/master/pixi.js.d.ts#L248

destroy(destroyChildren?: boolean): void;

See the related PR here:
Container.destroy update: pixijs/pixijs#2592

var container = new Container();
// Destroy with options
container.destroy({children: true, texture: true, baseTexture: true});
// Alternatively, short-hand for above
container.destroy(true);

Not sure of the syntax here. Someone else should make the PR.

export interface DestroyOptions {
  children?:boolean,
  texture?:boolean,
  baseTexture?:boolean
}
destroy(destroyChildren?:boolean|DestroyOptions): void;

GLShader wrong constructor signature

According to code
https://github.com/pixijs/pixi-gl-core/blob/master/src/GLShader.js

export class GLShader {
            constructor(gl: WebGLRenderingContext, vertexSrc: string | string[], fragmentSrc: string | string[], attributeLocations: string | string[] | any);

Should be

export class GLShader {
            constructor(gl: WebGLRenderingContext, vertexSrc: string | string[], fragmentSrc: string | string[]);

This issue also affects PIXI.Shader constructor since it extends GLShader

Is resource-loader out dated?

Thanks for the lib!

I was having a quick browse through the source and in the comments it says

    // extends
    // https://github.com/englercj/resource-loader/
    // 1.6.4

Pixi 4.0.0's package.json has "resource-loader": "^1.8.0"
Pixi 4.3.2's package.json has "resource-loader": "^2.0.3"

Is it possible that the definitions for the PIXI.Loader is outdated, or is the comment simply old

Sorry if I wasted your time with a stupid question

pixi-tilemap Support?

Hey there!

I'm so glad there's a Typescript definition repo here, but I was wondering if there was a plan in place to add support for the pixi-tilemap project? I'm a bit new to Typescript, and am not 100% sure of how easy it is to make one, but I think it would be a great addition!

Thanks,
Cian

Missing definitions for filtermanager

While doing some filter/shader programming i noticed that the filtermanager was missing definitions.

Overloads in definitions

concerning pixi.d.ts for v4.x

Having trouble with overloads in the definition file.

I have a class in typescript

export default class LayoutContainer extends PIXI.Container

Now I want to override addChild so I can do something before adding the child..
After some fiddling, I got rid of compile errors like
Error:(9, 22) TS2415: Class 'LayoutContainer' incorrectly extends base class 'Container'. Types of property 'addChild' are incompatible. Type '(child: DisplayObject) => DisplayObject' is not assignable to type '{ (child: DisplayObject): DisplayObject; (...child: DisplayObject[]): DisplayObject[]; }'. Type 'DisplayObject' is not assignable to type 'DisplayObject[]'.

So after some fiddling, the following code has no errors, but, I can't seem to implement the correct code for the first overload (the one with ...child and displayObject[] )

    public addChild(...child: PIXI.DisplayObject[]): PIXI.DisplayObject[];
    public addChild(child:PIXI.DisplayObject):PIXI.DisplayObject;
    public addChild(child:PIXI.DisplayObject | PIXI.DisplayObject[]):any
    {
        this.needsLayout = true; // (this is all i want to do extra. boohoo)
        if (child instanceof  PIXI.DisplayObject)
        {
            return super.addChild(child);
        }
    }

Does anyone know how to properly do this?

Please don't focus on the this.needsLayout bits, I could do it in a different way, but the issue is, how to properly override a function that has oveloads..

Suggesting change for BaseTexture Constructor

PIXI Version : any

suggestion : So I work with pixi on typescript but I noticed that what's was a "valid" command in JS is not valid when using the typescript form

PIXI Typescript definition files I resquest to change :
`
constructor(source: HTMLImageElement | HTMLCanvasElement, scaleMode?: number, resolution?: number);

TO :
constructor(source?: HTMLImageElement | HTMLCanvasElement, scaleMode?: number, resolution?: number);

Why?:
simply because normally you can do
`

var texture = new PIXI.Texture(new PIXI.BaseTexture());
PIXI.Sprite.call(this, texture);`

then after you set the texture later on.
it's totally valid in JS but I noticed this wasn't in typescript.
Will be possible in the PIXI V4 to make it as optionnal? for permit to create empty BaseTexture?

thanks for your further answer.

PIXI.Stage is not defined

Hi

I am trying to use PIXI with typescript, it seems PIXI.Stage() is not defined in the type definition.

/Dennis