From 9a9d2f4103c08d455ee5d7a6206308d7dd83905c Mon Sep 17 00:00:00 2001 From: Ivan Popelyshev Date: Sun, 13 Nov 2016 19:43:36 +0300 Subject: [PATCH 1/2] typings for pixi.js-v4. Old v3 is moved to subfolder --- pixi.js/index.d.ts | 3459 ++++++++++++++++++++++------------- pixi.js/pixi.js-tests.ts | 51 +- pixi.js/v3/pixi.js-tests.ts | 2761 ++++++++++++++++++++++++++++ pixi.js/v3/pixi.js.d.ts | 1748 ++++++++++++++++++ 4 files changed, 6710 insertions(+), 1309 deletions(-) create mode 100644 pixi.js/v3/pixi.js-tests.ts create mode 100644 pixi.js/v3/pixi.js.d.ts diff --git a/pixi.js/index.d.ts b/pixi.js/index.d.ts index 6e8640e91c..bf5ee7c0df 100644 --- a/pixi.js/index.d.ts +++ b/pixi.js/index.d.ts @@ -1,100 +1,80 @@ -// Type definitions for Pixi.js 3.0.9 dev -// Project: https://github.com/GoodBoyDigital/pixi.js/ +// Type definitions for Pixi.js 4.1 +// Project: https://github.com/pixijs/pixi.js/tree/dev // Definitions by: clark-stevenson // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -export = PIXI; -export as namespace PIXI; +declare module PIXI { -declare class PIXI { + // from CONST + export var VERSION: typeof CONST.VERSION; + export var PI_2: typeof CONST.PI_2; + export var RAD_TO_DEG: typeof CONST.RAD_TO_DEG; + export var DEG_TO_RAD: typeof CONST.DEG_TO_RAD; + export var TARGET_FPMS: typeof CONST.TARGET_FPMS; + export var RENDERER_TYPE: typeof CONST.RENDERER_TYPE; + export var BLEND_MODES: typeof CONST.BLEND_MODES; + export var DRAW_MODES: typeof CONST.DRAW_MODES; + export var SCALE_MODES: typeof CONST.SCALE_MODES; + export var WRAP_MODES: typeof CONST.WRAP_MODES; + export var TRANSFORM_MODE: typeof CONST.TRANSFORM_MODE; + export var SPRITE_MAX_TEXTURES: typeof CONST.SPRITE_MAX_TEXTURES; + export var PRECISION: typeof CONST.PRECISION; + export var TEXT_STYLE_CHANGED: typeof CONST.TEXT_STYLE_CHANGED; + export var GC_MODES: typeof CONST.GC_MODES; + export var MIPMAP_TEXTURES: typeof CONST.MIPMAP_TEXTURES; + export var RETINA_PREFIX: typeof CONST.RETINA_PREFIX; + export var RESOLUTION: typeof CONST.RESOLUTION; + export var FILTER_RESOLUTION: typeof CONST.FILTER_RESOLUTION; + export var DEFAULT_RENDER_OPTIONS: typeof CONST.DEFAULT_RENDER_OPTIONS; + export var SHAPES: typeof CONST.SHAPES; + export var SPRITE_BATCH_SIZE: typeof CONST.SPRITE_BATCH_SIZE; + export var TEXT_GRADIENT: typeof CONST.TEXT_GRADIENT; - static VERSION: string; - static PI_2: number; - static RAD_TO_DEG: number; - static DEG_TO_RAD: number; - static TARGET_FPMS: number; - static RENDERER_TYPE: { - UNKNOWN: number; - WEBGL: number; - CANVAS: number; - }; - static BLEND_MODES: { - NORMAL: number; - ADD: number; - MULTIPLY: number; - SCREEN: number; - OVERLAY: number; - DARKEN: number; - LIGHTEN: number; - COLOR_DODGE: number; - COLOR_BURN: number; - HARD_LIGHT: number; - SOFT_LIGHT: number; - DIFFERENCE: number; - EXCLUSION: number; - HUE: number; - SATURATION: number; - COLOR: number; - LUMINOSITY: number; - - }; - static DRAW_MODES: { - POINTS: number; - LINES: number; - LINE_LOOP: number; - LINE_STRIP: number; - TRIANGLES: number; - TRIANGLE_STRIP: number; - TRIANGLE_FAN: number; - }; - static SCALE_MODES: { - DEFAULT: number; - LINEAR: number; - NEAREST: number; - }; - static RETINA_PREFIX: string; - static RESOLUTION: number; - static FILTER_RESOLUTION: number; - static DEFAULT_RENDER_OPTIONS: { - view: HTMLCanvasElement; - resolution: number; - antialias: boolean; - forceFXAA: boolean; - autoResize: boolean; - transparent: boolean; - backgroundColor: number; - clearBeforeRender: boolean; - preserveDrawingBuffer: boolean; - roundPixels: boolean; - }; - static SHAPES: { - POLY: number; - RECT: number; - CIRC: number; - ELIP: number; - RREC: number; - }; - static SPRITE_BATCH_SIZE: number; - -} - -declare namespace PIXI { - - export function autoDetectRenderer(width: number, height: number, options?: PIXI.RendererOptions, noWebGL?: boolean): PIXI.WebGLRenderer | PIXI.CanvasRenderer; + export function autoDetectRenderer(width: number, height: number, options?: PIXI.IRendererOptions, noWebGL?: boolean): PIXI.WebGLRenderer | PIXI.CanvasRenderer; export var loader: PIXI.loaders.Loader; - //https://github.com/primus/eventemitter3 - export class EventEmitter { + ////////////////////////////////////////////////////////////////////////////// + /////////////////////////////ACCESSIBILITY//////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// - listeners(event: string): Function[]; - emit(event: string, ...args: any[]): boolean; - on(event: string, fn: Function, context?: any): EventEmitter; - once(event: string, fn: Function, context?: any): EventEmitter; - removeListener(event: string, fn?: Function, context?: any, once?: boolean): EventEmitter; - removeAllListeners(event?: string): EventEmitter; + export module accessibility { - off(event: string, fn?: Function, context?: any, once?: boolean): EventEmitter; - addListener(event: string, fn: Function, context?: any): EventEmitter; + // accessibility + export class AccessibilityManager { + + constructor(renderer: CanvasRenderer | WebGLRenderer); + + protected div: HTMLElement; + protected pool: HTMLElement[]; + protected renderId: number; + debug: boolean; + renderer: SystemRenderer; + protected children: IAccessibleTarget[]; + protected isActive: boolean; + + protected activate(): void; + protected deactivate(): void; + protected updateAccessibleObjects(displayObject: DisplayObject): void; + protected update(): void; + protected capHitArea(hitArea: IHitArea): void; + protected addChild(displayObject: DisplayObject): void; + protected _onClick(e: interaction.InteractionEvent): void; + protected _onFocus(e: interaction.InteractionEvent): void; + protected _onFocusOut(e: interaction.InteractionEvent): void; + protected _onKeyDown(e: interaction.InteractionEvent): void; + protected _onMouseMove(): void; + + destroy(): void; + + } + export interface IAccessibleTarget { + + accessible: boolean; + accessibleTitle: string; + accessibleHint: string; + tabIndex: number; + + } } @@ -102,124 +82,149 @@ declare namespace PIXI { ////////////////////////////////CORE////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////// - //display + // const - export class DisplayObject extends EventEmitter implements interaction.InteractiveTarget { - - //begin extras.cacheAsBitmap see https://github.com/pixijs/pixi-typescript/commit/1207b7f4752d79a088d6a9a465a3ec799906b1db - protected _originalRenderWebGL: WebGLRenderer; - protected _originalRenderCanvas: CanvasRenderer; - protected _originalUpdateTransform: boolean; - protected _originalHitTest: any; - protected _cachedSprite: any; - protected _originalDestroy: any; - - cacheAsBitmap: boolean; - - protected _renderCachedWebGL(renderer: WebGLRenderer): void; - protected _initCachedDisplayObject(renderer: WebGLRenderer): void; - protected _renderCachedCanvas(renderer: CanvasRenderer): void; - protected _initCachedDisplayObjectCanvas(renderer: CanvasRenderer): void; - protected _getCachedBounds(): Rectangle; - protected _destroyCachedDisplayObject(): void; - protected _cacheAsBitmapDestroy(): void; - //end extras.cacheAsBitmap - - protected _sr: number; - protected _cr: number; - protected _bounds: Rectangle; - protected _currentBounds: Rectangle; - protected _mask: Rectangle; - protected _cachedObject: any; - - updateTransform(): void; - - position: Point; - scale: Point; - pivot: Point; - rotation: number; - renderable: boolean; - alpha: number; - visible: boolean; - parent: Container; - worldAlpha: number; - worldTransform: Matrix; - filterArea: Rectangle; - - x: number; - y: number; - worldVisible: boolean; - mask: Graphics | Sprite; - filters: AbstractFilter[]; - name: string; - - getBounds(matrix?: Matrix): Rectangle; - getLocalBounds(): Rectangle; - toGlobal(position: Point): Point; - toLocal(position: Point, from?: DisplayObject): Point; - generateTexture(renderer: CanvasRenderer | WebGLRenderer, scaleMode: number, resolution: number): Texture; - setParent(container: Container): Container; - setTransform(x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, skewX?: number, skewY?: number, pivotX?: number, pivotY?: number): DisplayObject; - destroy(): void; - getChildByName(name: string): DisplayObject; - getGlobalPosition(point: Point): Point; - - interactive: boolean; - buttonMode: boolean; - interactiveChildren: boolean; - defaultCursor: string; - hitArea: HitArea; - - on(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: string, fn: Function, context?: any): EventEmitter; - - once(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: string, fn: Function, context?: any): EventEmitter; + export module CONST { + export var VERSION: string; + export var PI_2: number; + export var RAD_TO_DEG: number; + export var DEG_TO_RAD: number; + export var TARGET_FPMS: number; + export var RENDERER_TYPE: { + UNKNOWN: number; + WEBGL: number; + CANVAS: number; + }; + export var BLEND_MODES: { + NORMAL: number; + ADD: number; + MULTIPLY: number; + SCREEN: number; + OVERLAY: number; + DARKEN: number; + LIGHTEN: number; + COLOR_DODGE: number; + COLOR_BURN: number; + HARD_LIGHT: number; + SOFT_LIGHT: number; + DIFFERENCE: number; + EXCLUSION: number; + HUE: number; + SATURATION: number; + COLOR: number; + LUMINOSITY: number; + }; + export var DRAW_MODES: { + POINTS: number; + LINES: number; + LINE_LOOP: number; + LINE_STRIP: number; + TRIANGLES: number; + TRIANGLE_STRIP: number; + TRIANGLE_FAN: number; + }; + export var SCALE_MODES: { + DEFAULT: number, + LINEAR: number, + NEAREST: number + }; + export var GC_MODES: { + DEFAULT: number; + AUTO: number; + MANUAL: number; + }; + export var WRAP_MODES: { + CLAMP: number; + DEFAULT: number; + MIRRORED_REPEAT: number; + REPEAT: number; + }; + export var TRANSFORM_MODE: { + DEFAULT: number; + DYNAMIC: number; + STATIC: number; + }; + export var MIPMAP_TEXTURES: boolean; + export var RETINA_PREFIX: RegExp; + export var RESOLUTION: number; + export var FILTER_RESOLUTION: number; + export var DEFAULT_RENDER_OPTIONS: { + view: HTMLCanvasElement; + antialias: boolean; + forceFXAA: boolean; + autoResize: boolean; + transparent: boolean; + backgroundColor: number; + clearBeforeRender: boolean; + preserveDrawingBuffer: boolean; + roundPixels: boolean; + }; + export var URL_FILE_EXTENSION: RegExp | string; + export var DATA_URI: RegExp | string; + export var SVG_SIZE: RegExp | string; + export var SHAPES: { + POLY: number; + RECT: number; + CIRC: number; + ELIP: number; + RREC: number; + }; + export var PRECISION: { + DEFAULT: string; + LOW: string; + MEDIUM: string; + HIGH: string; + }; + export var TEXT_GRADIENT: { + LINEAR_VERTICAL: number; + LINEAR_HORIZONTAL: number; + }; + export var SPRITE_BATCH_SIZE: number; + export var SPRITE_MAX_TEXTURES: number; + export var TEXT_STYLE_CHANGED: string; } + // display + + export interface IDestroyOptions { + children?: boolean; + texture?: boolean; + baseTexture?: boolean; + } + export class Bounds { + + minX: number; + minY: number; + maxX: number; + maxY: number; + rect: Rectangle; + + isEmpty(): boolean; + clear(): void; + + getRectangle(rect?: Rectangle): Rectangle; + addPoint(point: Point): void; + addQuad(vertices: number[]): Bounds; + addFrame(transform: Transform, x0: number, y0: number, x1: number, y1: number): void; + addVertices(transform: Transform, vertices: number[], beginOffset: number, endOffset: number): void; + addBounds(bounds: Bounds): void; + addBoundsMask(bounds: Bounds, mask: Bounds): void; + addBoundsArea(bounds: Bounds, area: Rectangle): void; + + } export class Container extends DisplayObject { - protected _renderWebGL(renderer: WebGLRenderer): void; - protected _renderCanvas(renderer: CanvasRenderer): void; - - protected onChildrenChange: () => void; + // begin extras.getChildByName + getChildByName(name: string): DisplayObject; + // end extras.getChildByName children: DisplayObject[]; - width: number; height: number; + protected onChildrenChange: (...args: any[]) => void; + addChild(child: DisplayObject): DisplayObject; addChild(...child: DisplayObject[]): DisplayObject; addChildAt(child: DisplayObject, index: number): DisplayObject; swapChildren(child: DisplayObject, child2: DisplayObject): void; @@ -228,58 +233,257 @@ declare namespace PIXI { getChildAt(index: number): DisplayObject; removeChild(child: DisplayObject): DisplayObject; removeChildAt(index: number): DisplayObject; - removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[]; - destroy(destroyChildren?: boolean): void; - generateTexture(renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer, resolution?: number, scaleMode?: number): Texture; - + removeChildren(beginIndex?: number, endIndex?: number): DisplayObject | DisplayObject[]; + updateTransform(): void; + calculateBounds(): void; + protected _calculateBounds(): void; + protected containerUpdateTransform(): void; renderWebGL(renderer: WebGLRenderer): void; + renderAdvancedWebGL(renderer: WebGLRenderer): void; + protected _renderWebGL(renderer: WebGLRenderer): void; + protected _renderCanvas(renderer: CanvasRenderer): void; renderCanvas(renderer: CanvasRenderer): void; + destroy(options?: IDestroyOptions | boolean): void; - once(event: 'added', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: string, fn: Function, context?: any): EventEmitter; - once(event: 'removed', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - once(event: string, fn: Function, context?: any): EventEmitter; - on(event: 'added', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: string, fn: Function, context?: any): EventEmitter; - on(event: 'removed', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; - on(event: string, fn: Function, context?: any): EventEmitter; + once(event: "added", fn: (displayObject: DisplayObject) => void, context?: any): utils.EventEmitter; + once(event: "removed", fn: (DisplayObject: DisplayObject) => void, context?: any): utils.EventEmitter; + once(event: string, fn: Function, context?: any): utils.EventEmitter; + on(event: "added", fn: (displayObject: DisplayObject) => void, context?: any): utils.EventEmitter; + on(event: "removed", fn: (DisplayObject: DisplayObject) => void, context?: any): utils.EventEmitter; + on(event: string, fn: Function, context?: any): utils.EventEmitter; + off(event: string, fn: Function, context?: any): utils.EventEmitter; + + } + export class DisplayObject extends utils.EventEmitter implements interaction.InteractiveTarget { + + // begin extras.cacheAsBitmap + protected _cacheAsBitmap: boolean; + protected _cacheData: boolean; + cacheAsBitmap: boolean; + protected _renderCachedWebGL(renderer: WebGLRenderer): void; + protected _initCachedDisplayObject(renderer: WebGLRenderer): void; + protected _renderCachedCanvas(renderer: CanvasRenderer): void; + protected _initCachedDisplayObjectCanvas(renderer: CanvasRenderer): void; + protected _calculateCachedBounds(): Rectangle; + protected _getCachedLocalBounds(): Rectangle; + protected _destroyCachedDisplayObject(): void; + protected _cacheAsBitmapDestroy(): void; + // end extras.cacheAsBitmap + + // begin extras.getChildByName + name: string; + // end extras.getChildByName + + // begin extras.getGlobalPosition + getGlobalPosition(point?: Point, skipUpdate?: boolean): Point; + // end extras.getGlobalPosition + + // begin accessible target + accessible: boolean; + accessibleTitle: string; + accessibleHint: string; + tabIndex: number; + // end accessible target + + // begin interactive target + interactive: boolean; + buttonMode: boolean; + hitArea: IHitArea; + interactiveChildren: boolean; + defaultCursor: string; + _isRightDown: boolean; + _isLeftDown: boolean; + // end interactive target + + transform: TransformBase; + alpha: number; + visible: boolean; + renderable: boolean; + parent: Container; + worldAlpha: number; + filterArea: Rectangle; + protected _filters: Filter[]; + protected _enabledFilters: Filter[]; + protected _bounds: Bounds; + protected _boundsID: number; + protected _lastBoundsID: number; + protected _boundsRect: Rectangle; + protected _localBoundsRect: Rectangle; + protected _mask: Rectangle; + x: number; + y: number; + worldTransform: Matrix; + localTransform: Matrix; + position: Point; + scale: Point; + pivot: Point; + skew: Point; + rotation: number; + worldVisible: boolean; + mask: PIXI.Graphics | PIXI.Sprite; + filters: Filter[]; + + updateTransform(): void; + protected displayObjectUpdateTransform(): void; + protected _recursivePostUpdateTransform(): void; + getBounds(skipUpdate?: boolean, rect?: Rectangle): Rectangle; + getLocalBounds(rect?: Rectangle): Rectangle; + toGlobal(position: Point, point?: Point, skipUpdate?: boolean): Point; + toLocal(position: Point, from?: DisplayObject, point?: Point, skipUpdate?: boolean): Point; + protected renderWebGL(renderer: WebGLRenderer): void; + protected renderCanvas(renderer: CanvasRenderer): void; + setParent(container: Container): Container; + setTransform(x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, skewX?: number, skewY?: number, pivotX?: number, pivotY?: number): DisplayObject; + destroy(): void; + + on(event: string, fn: Function, context?: any): utils.EventEmitter; + once(event: string, fn: Function, context?: any): utils.EventEmitter; + off(event: string, fn: Function, context?: any): utils.EventEmitter; + + /* + on(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + on(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + + once(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + once(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter; + */ } - //graphics + export class TransformBase { + + static IDENTITY: TransformBase; + + worldTransform: Matrix; + localTransform: Matrix; + protected _worldID: number; + updateLocalTransform(): void; + updateTransform(parentTransform: TransformBase): void; + updateWorldTransform(parentTransform: TransformBase): void; + + } + export class TransformStatic extends TransformBase { + + position: ObservablePoint; + scale: ObservablePoint; + pivot: ObservablePoint; + skew: ObservablePoint; + + protected _rotation: number; + protected _sr: number; + protected _cr: number; + protected _cy: number; + protected _sy: number; + protected _nsx: number; + protected _cx: number; + protected _currentLocalID: number; + + protected onChange(): void; + updateSkew(): void; + updateLocalTransform(): void; + updateTransform(parentTransform: TransformBase): void; + setFromMatrix(matrix: Matrix): void; + + rotation: number; + + } + export class Transform extends TransformBase { + + constructor(); + + position: Point; + scale: Point; + skew: ObservablePoint; + pivot: Point; + + protected _rotation: number; + protected _sr: number; + protected _cr: number; + protected _cy: number; + protected _sy: number; + protected _nsx: number; + protected _cx: number; + + updateSkew(): void; + setFromMatrix(matrix: Matrix): void; + + rotation: number; + + } + + // graphics export class GraphicsData { - constructor(lineWidth: number, lineColor: number, lineAlpha: number, fillColor: number, fillAlpha: number, fill: boolean, shape: Circle | Rectangle | Ellipse | Polygon); + constructor(lineWidth: number, lineColor: number, lineAlpha: number, fillColor: number, fillAlpha: number, fill: boolean, shape: IShape | Circle | Rectangle | RoundedRectangle | Ellipse | Polygon); lineWidth: number; lineColor: number; lineAlpha: number; + protected _lineTint: number; fillColor: number; fillAlpha: number; - fill: boolean; - shape: Circle | Rectangle | Ellipse | Polygon; - type: number; - - clone(): GraphicsData; - - protected _lineTint: number; protected _fillTint: number; + fill: boolean; + protected holes: IShape[]; + shape: IShape | Circle | Rectangle | RoundedRectangle | Ellipse | Polygon; + type: number; + clone(): GraphicsData; + addHole(shape: IShape | Circle | Rectangle | RoundedRectangle | Ellipse | Polygon): void; + destroy(options?: IDestroyOptions | boolean): void; } export class Graphics extends Container { - protected boundsDirty: boolean; - protected dirty: boolean; - protected glDirty: boolean; - fillAlpha: number; lineWidth: number; lineColor: number; + protected graphicsData: GraphicsData[]; tint: number; + protected _prevTint: number; blendMode: number; + currentPath: GraphicsData; + protected _webGL: any; isMask: boolean; boundsPadding: number; + protected _localBounds: Bounds; + dirty: boolean; + fastRectDirty: number; + clearDirty: number; + boundsDirty: number; + protected cachedSpriteDirty: boolean; + protected _spriteRect: Rectangle; + protected _fastRect: boolean; + + static _SPRITE_TEXTURE: Texture; clone(): Graphics; lineStyle(lineWidth?: number, color?: number, alpha?: number): Graphics; @@ -297,34 +501,93 @@ declare namespace PIXI { drawEllipse(x: number, y: number, width: number, height: number): Graphics; drawPolygon(path: number[] | Point[]): Graphics; clear(): Graphics; - //todo - generateTexture(renderer: WebGLRenderer | CanvasRenderer, resolution?: number, scaleMode?: number): Texture; - getBounds(matrix?: Matrix): Rectangle; + isFastRect(): boolean; + protected _renderCanvas(renderer: CanvasRenderer): void; + protected _calculateBounds(): Rectangle; + protected _renderSpriteRect(renderer: PIXI.SystemRenderer): void; containsPoint(point: Point): boolean; updateLocalBounds(): void; - drawShape(shape: Circle | Rectangle | Ellipse | Polygon): GraphicsData; + drawShape(shape: IShape | Circle | Rectangle | Ellipse | Polygon | RoundedRectangle): GraphicsData; + generateCanvasTexture(scaleMode?: number, resolution?: number): Texture; + protected closePath(): Graphics; + protected addHole(): Graphics; + destroy(options?: IDestroyOptions | boolean): void; } - export interface GraphicsRenderer extends ObjectRenderer { - //yikes todo + export class CanvasGraphicsRenderer { + + constructor(renderer: SystemRenderer); + render(graphics: Graphics): void; + protected updateGraphicsTint(graphics: Graphics): void; + protected renderPolygon(points: Point[], close: boolean, context: CanvasRenderingContext2D): void; + destroy(): void; + } - export interface WebGLGraphicsData { - //yikes todo! + export class GraphicsRenderer extends ObjectRenderer { + + constructor(renderer: PIXI.CanvasRenderer); + + protected graphicsDataPool: GraphicsData[]; + protected primitiveShader: PrimitiveShader; + gl: WebGLRenderingContext; + + CONTEXT_UID: number; + + destroy(): void; + render(graphics: Graphics): void; + protected updateGraphics(graphics: PIXI.Graphics): void; + getWebGLData(webGL: WebGLRenderingContext, type: number): WebGLGraphicsData; + } + export class WebGLGraphicsData { - //math + constructor(gl: WebGLRenderingContext, shader: glCore.GLShader, attribsState: glCore.IAttribState); - export class Point { + gl: WebGLRenderingContext; + color: number[]; + points: Point[]; + indices: number[]; + buffer: WebGLBuffer; + indexBuffer: WebGLBuffer; + dirty: boolean; + glPoints: number[]; + glIndices: number[]; + shader: glCore.GLShader; + vao: glCore.VertexArrayObject; - x: number; - y: number; + reset(): void; + upload(): void; + destroy(): void; - constructor(x?: number, y?: number); + } + export class PrimitiveShader extends glCore.GLShader { } - clone(): Point; - copy(p: Point): void; - equals(p: Point): boolean; - set(x?: number, y?: number): void; + // math + + export module GroupD8 { + + export var E: number; + export var SE: number; + export var S: number; + export var SW: number; + export var W: number; + export var NW: number; + export var N: number; + export var NE: number; + export var MIRROR_HORIZONTAL: number; + export var MIRROR_VERTICAL: number; + + export function uX(ind: number): number; + export function uY(ind: number): number; + export function vX(ind: number): number; + export function vY(ind: number): number; + export function inv(rotation: number): number; + export function add(rotationSecond: number, rotationFirst: number): number; + export function sub(rotationSecond: number, rotationFirst: number): number; + export function rotate180(rotation: number): number; + export function isSwapWidthHeight(rotation: number): boolean; + export function byDirection(dx: number, dy: number): number; + export function matrixAppendRotationInv(matrix: Matrix, rotation: number, tx: number, ty: number): void; } export class Matrix { @@ -337,6 +600,7 @@ declare namespace PIXI { ty: number; fromArray(array: number[]): void; + set(a: number, b: number, c: number, d: number, tx: number, ty: number): Matrix; toArray(transpose?: boolean, out?: number[]): number[]; apply(pos: Point, newPos?: Point): Point; applyInverse(pos: Point, newPos?: Point): Point; @@ -344,26 +608,53 @@ declare namespace PIXI { scale(x: number, y: number): Matrix; rotate(angle: number): Matrix; append(matrix: Matrix): Matrix; + setTransform(x: number, y: number, pivotX: number, pivotY: number, scaleX: number, scaleY: number, rotation: number, skewX: number, skewY: number): PIXI.Matrix; prepend(matrix: Matrix): Matrix; invert(): Matrix; identity(): Matrix; + decompose(transform: TransformBase): TransformBase; clone(): Matrix; copy(matrix: Matrix): Matrix; - set(a: number, b: number, c: number, d: number, tx: number, ty: number): Matrix; - setTransform(a: number, b: number, c: number, d: number, sr: number, cr: number, cy: number, sy: number, nsx: number, cs: number): PIXI.Matrix; static IDENTITY: Matrix; static TEMP_MATRIX: Matrix; } + export class ObservablePoint { - export interface HitArea { + constructor(cb: Function, scope?: any, x?: number, y?: number); + + x: number; + y: number; + cb: () => void; + scope: any; + + set(x?: number, y?: number): void; + copy(point: Point | ObservablePoint): void; + + } + export class Point { + + constructor(x?: number, y?: number); + + x: number; + y: number; + + clone(): Point; + copy(p: Point): void; + equals(p: Point): boolean; + set(x?: number, y?: number): void; + + } + + export interface IShape { + } + export interface IHitArea extends IShape { contains(x: number, y: number): boolean; } - - export class Circle implements HitArea { + export class Circle { constructor(x?: number, y?: number, radius?: number); @@ -377,7 +668,7 @@ declare namespace PIXI { getBounds(): Rectangle; } - export class Ellipse implements HitArea { + export class Ellipse { constructor(x?: number, y?: number, width?: number, height?: number); @@ -392,10 +683,9 @@ declare namespace PIXI { getBounds(): Rectangle; } - export class Polygon implements HitArea { + export class Polygon { - constructor(points: Point[]); - constructor(points: number[]); + constructor(points: Point[] | number[]); constructor(...points: Point[]); constructor(...points: number[]); @@ -405,10 +695,10 @@ declare namespace PIXI { clone(): Polygon; contains(x: number, y: number): boolean; - + close(): void; } - export class Rectangle implements HitArea { + export class Rectangle { constructor(x?: number, y?: number, width?: number, height?: number); @@ -417,14 +707,22 @@ declare namespace PIXI { width: number; height: number; type: number; + left: number; + right: number; + top: number; + bottom: number; static EMPTY: Rectangle; clone(): Rectangle; + copy(rectangle: Rectangle): Rectangle; contains(x: number, y: number): boolean; + pad(paddingX: number, paddingY: number): void; + fit(rectangle: Rectangle): void; + enlarge(rect: Rectangle): void; } - export class RoundedRectangle implements HitArea { + export class RoundedRectangle { constructor(x?: number, y?: number, width?: number, height?: number, radius?: number); @@ -435,96 +733,29 @@ declare namespace PIXI { radius: number; type: number; - static EMPTY: Rectangle; - - clone(): Rectangle; + clone(): RoundedRectangle; contains(x: number, y: number): boolean; } - //particles + // renderers - export interface ParticleContainerProperties { - - scale?: boolean; - position?: boolean; - rotation?: boolean; - uvs?: boolean; - alpha?: boolean; - - } - export class ParticleContainer extends Container { - - constructor(size?: number, properties?: ParticleContainerProperties, batchSize?: number); - - protected _maxSize: number; - protected _batchSize: number; - protected _properties: boolean[]; - protected _buffers: WebGLBuffer[]; - protected _bufferToUpdate: number; - - protected onChildrenChange: (smallestChildIndex?: number) => void; - - interactiveChildren: boolean; - blendMode: number; - roundPixels: boolean; - - setProperties(properties: ParticleContainerProperties): void; - - } - export interface ParticleBuffer { - - gl: WebGLRenderingContext; - vertSize: number; - vertByteSize: number; - size: number; - dynamicProperties: any[]; - staticProperties: any[]; - - staticStride: number; - staticBuffer: any; - staticData: any; - dynamicStride: number; - dynamicBuffer: any; - dynamicData: any; - - initBuffers(): void; - bind(): void; - destroy(): void; - - } - export interface ParticleRenderer { - - } - export interface ParticleShader { - - } - - //renderers - - export interface RendererOptions { + export interface IRendererOptions { view?: HTMLCanvasElement; transparent?: boolean; - antialias?: boolean; autoResize?: boolean; + antialias?: boolean; resolution?: number; - clearBeforeRendering?: boolean; - preserveDrawingBuffer?: boolean; - forceFXAA?: boolean; - roundPixels?: boolean; + clearBeforeRender?: boolean; backgroundColor?: number; + roundPixels?: boolean; + context?: WebGLRenderingContext; } - export class SystemRenderer extends EventEmitter { + export class SystemRenderer extends utils.EventEmitter { - protected _backgroundColor: number; - protected _backgroundColorRgb: number[]; - protected _backgroundColorString: string; - protected _tempDisplayObjectParent: any; - protected _lastObjectRendered: DisplayObject; - - constructor(system: string, width?: number, height?: number, options?: RendererOptions); + constructor(system: string, width?: number, height?: number, options?: IRendererOptions); type: number; width: number; @@ -533,82 +764,107 @@ declare namespace PIXI { resolution: number; transparent: boolean; autoResize: boolean; - blendModes: any; //todo? + blendModes: any; // todo? preserveDrawingBuffer: boolean; clearBeforeRender: boolean; roundPixels: boolean; + protected _backgroundColor: number; + protected _backgroundColorRgba: number[]; + protected _backgroundColorString: string; + protected _tempDisplayObjectParent: Container; + protected _lastObjectRendered: DisplayObject; backgroundColor: number; - render(object: DisplayObject): void; resize(width: number, height: number): void; + generateTexture(displayObject: DisplayObject, scaleMode?: number, resolution?: number): RenderTexture; + render(...args: any[]): void; destroy(removeView?: boolean): void; } export class CanvasRenderer extends SystemRenderer { - protected renderDisplayObject(displayObject: DisplayObject, context: CanvasRenderingContext2D): void; - protected _mapBlendModes(): void; + // plugintarget mixin start + protected __plugins: any[]; + plugins: any; + registerPlugin(pluginName: string, ctor: Function): void; + initPlugins(): void; + destroyPlugins(): void; + // plugintarget mixin end - constructor(width?: number, height?: number, options?: RendererOptions); + constructor(width?: number, height?: number, options?: IRendererOptions); - context: CanvasRenderingContext2D; + rootContext: CanvasRenderingContext2D; + rootResolution: number; refresh: boolean; maskManager: CanvasMaskManager; - roundPixels: boolean; smoothProperty: string; - render(object: DisplayObject): void; + render(displayObject: PIXI.DisplayObject, renderTexture?: PIXI.RenderTexture, clear?: boolean, transform?: PIXI.Transform, skipUpdateTransform?: boolean): void + setBlendMode(blendMode: number): void; + destroy(removeView?: boolean): void; resize(w: number, h: number): void; - } - export class CanvasBuffer { - - protected clear(): void; - - constructor(width: number, height: number); - - canvas: HTMLCanvasElement; - context: CanvasRenderingContext2D; - - width: number; - height: number; - - resize(width: number, height: number): void; - destroy(): void; - - } - export class CanvasGraphics { - - static renderGraphicsMask(graphics: Graphics, context: CanvasRenderingContext2D): void; - static updateGraphicsTint(graphics: Graphics): void; - - static renderGraphics(graphics: Graphics, context: CanvasRenderingContext2D): void; + on(event: "prerender", fn: () => void, context?: any): utils.EventEmitter; + on(event: "postrender", fn: () => void, context?: any): utils.EventEmitter; + on(event: string, fn: Function, context?: any): utils.EventEmitter; + once(event: "prerender", fn: () => void, context?: any): utils.EventEmitter; + once(event: "postrender", fn: () => void, context?: any): utils.EventEmitter; + once(event: string, fn: Function, context?: any): utils.EventEmitter; + off(event: string, fn: Function, context?: any): utils.EventEmitter; } export class CanvasMaskManager { - pushMask(maskData: any, renderer: WebGLRenderer | CanvasRenderer): void; + constructor(renderer: CanvasRenderer); + + pushMask(maskData: any): void; + protected renderGraphicsShape(graphics: Graphics): void; popMask(renderer: WebGLRenderer | CanvasRenderer): void; destroy(): void; } - export class CanvasTinter { + export class CanvasRenderTarget { - static getTintedTexture(sprite: DisplayObject, color: number): HTMLCanvasElement; - static tintWithMultiply(texture: Texture, color: number, canvas: HTMLDivElement): void; - static tintWithOverlay(texture: Texture, color: number, canvas: HTMLCanvasElement): void; - static tintWithPerPixel(texture: Texture, color: number, canvas: HTMLCanvasElement): void; - static roundColor(color: number): number; - static cacheStepsPerColorChannel: number; - static convertTintToImage: boolean; - static vanUseMultiply: boolean; - static tintMethod: Function; + constructor(width: number, height: number, resolution: number); + + canvas: HTMLCanvasElement; + context: CanvasRenderingContext2D; + resolution: number; + + width: number; + height: number; + + clear(): void; + resize(width: number, height: number): void; + destroy(): void; + + } + + export interface IWebGLRendererOptions { + + view?: HTMLCanvasElement; + transparent?: boolean; + autoResize?: boolean; + antialias?: boolean; + forceFXAA?: boolean; + resolution?: number; + clearBeforeRender?: boolean; + preserveDrawingBuffer?: boolean; + roundPixels?: boolean; } export class WebGLRenderer extends SystemRenderer { - protected _useFXAA: boolean; - protected _FXAAFilter: filters.FXAAFilter; + // plugintarget mixin start + protected __plugins: any[]; + plugins: any; + registerPlugin(pluginName: string, ctor: Function): void; + initPlugins(): void; + destroyPlugins(): void; + // plugintarget mixin end + + constructor(width?: number, height?: number, options?: IWebGLRendererOptions); + protected _contextOptions: { alpha: boolean; antiAlias: boolean; @@ -616,363 +872,510 @@ declare namespace PIXI { stencil: boolean; preseveDrawingBuffer: boolean; }; - protected _renderTargetStack: RenderTarget[]; - - protected _initContext(): void; - protected _createContext(): void; - protected handleContextLost: (event: WebGLContextEvent) => void; - protected _mapGlModes(): void; - protected _managedTextures: Texture[]; - - constructor(width?: number, height?: number, options?: RendererOptions); - - drawCount: number; - shaderManager: ShaderManager; + protected _backgroundColorRgba: number[]; maskManager: MaskManager; stencilManager: StencilManager; - filterManager: FilterManager; - blendModeManager: BlendModeManager; - currentRenderTarget: RenderTarget; + emptyRenderer: ObjectRenderer; currentRenderer: ObjectRenderer; + gl: WebGLRenderingContext; + state: WebGLState; + renderingToScreen: boolean; + boundTextures: Texture[]; + filterManager: FilterManager; + textureManager: TextureManager; + protected drawModes: any; + protected _activeShader: Shader; + protected _activeRenderTarget: RenderTarget; + protected _initContext(): void; - render(object: DisplayObject): void; - renderDisplayObject(displayObject: DisplayObject, renderTarget: RenderTarget, clear: boolean): void; + render(displayObject: PIXI.DisplayObject, renderTexture?: PIXI.RenderTexture, clear?: boolean, transform?: PIXI.Transform, skipUpdateTransform?: boolean): void setObjectRenderer(objectRenderer: ObjectRenderer): void; - setRenderTarget(renderTarget: RenderTarget): void; - updateTexture(texture: BaseTexture | Texture): BaseTexture | Texture; - destroyTexture(texture: BaseTexture | Texture, _skipRemove?: boolean): void; + flush(): void; + resize(width: number, height: number): void; + setBlendMode(blendMode: number): void; + clear(clearColor?: number): void; + setTransform(matrix: Matrix): void; + bindRenderTexture(renderTexture: RenderTexture, transform: Transform): WebGLRenderer; + bindRenderTarget(renderTarget: RenderTarget): WebGLRenderer; + bindShader(shader: Shader): WebGLRenderer; + bindTexture(texture: Texture, location: number, forceLocation?: boolean): WebGLRenderer; + unbindTexture(texture: Texture): WebGLRenderer; + protected createVao(): glCore.VertexArrayObject; + reset(): WebGLRenderer; + handleContextLost: (event: WebGLContextEvent) => void; + handleContextRestored: () => void; + destroy(removeView?: boolean): void; + + on(event: "context", fn: (gl: WebGLRenderingContext) => void, context?: any): utils.EventEmitter; + on(event: "prerender", fn: () => void, context?: any): utils.EventEmitter; + on(event: "postrender", fn: () => void, context?: any): utils.EventEmitter; + on(event: string, fn: Function, context?: any): utils.EventEmitter; + once(event: "context", fn: (gl: WebGLRenderingContext) => void, context?: any): utils.EventEmitter; + once(event: "prerender", fn: () => void, context?: any): utils.EventEmitter; + once(event: "postrender", fn: () => void, context?: any): utils.EventEmitter; + once(event: string, fn: Function, context?: any): utils.EventEmitter; + off(event: string, fn: Function, context?: any): utils.EventEmitter; } - export class AbstractFilter { + export class WebGLState { - protected vertexSrc: string[]; - protected fragmentSrc: string[]; + constructor(gl: WebGLRenderingContext); - constructor(vertexSrc?: string | string[], fragmentSrc?: string | string[], uniforms?: any); + activeState: number[]; + defaultState: number[]; + stackIndex: number; + stack: number[]; + gl: WebGLRenderingContext; + maxAttribs: number; + attribState: glCore.IAttribState; + nativeVaoExtension: any; - uniforms: any; - - padding: number; - - getShader(renderer: WebGLRenderer): Shader; - applyFilter(renderer: WebGLRenderer, input: RenderTarget, output: RenderTarget, clear?: boolean): void; - syncUniform(uniform: WebGLUniformLocation): void; + push(): void; + pop(): void; + setState(state: number[]): void; + setBlend(value: number): void; + setBlendMode(value: number): void; + setDepthTest(value: number): void; + setCullFace(value: number): void; + setFrontFace(value: number): void; + resetAttributes(): void; + resetToDefault(): void; } - export class SpriteMaskFilter extends AbstractFilter { - - constructor(sprite: Sprite); - - maskSprite: Sprite; - maskMatrix: Matrix; - - applyFilter(renderer: WebGLRenderbuffer, input: RenderTarget, output: RenderTarget): void; - map: Texture; - offset: Point; - - } - export class BlendModeManager extends WebGLManager { + export class TextureManager { constructor(renderer: WebGLRenderer); - setBlendMode(blendMode: number): boolean; - - } - - export class FilterManager extends WebGLManager { - - constructor(renderer: WebGLRenderer); - - filterStack: any[]; renderer: WebGLRenderer; - texturePool: any[]; + gl: WebGLRenderingContext; + protected _managedTextures: WebGLTexture[]; - onContextChange: () => void; - setFilterStack(filterStack: any[]): void; - pushFilter(target: RenderTarget, filters: any[]): void; - popFilter(): AbstractFilter; - getRenderTarget(clear?: boolean): RenderTarget; - protected returnRenderTarget(renderTarget: RenderTarget): void; - applyFilter(shader: Shader | AbstractFilter, inputTarget: RenderTarget, outputTarget: RenderTarget, clear?: boolean): void; - calculateMappedMatrix(filterArea: Rectangle, sprite: Sprite, outputMatrix?: Matrix): Matrix; - capFilterArea(filterArea: Rectangle): void; + bindTexture(): void; + getTexture(): WebGLTexture; + updateTexture(texture: BaseTexture | Texture): WebGLTexture; + destroyTexture(texture: BaseTexture, _skipRemove?: boolean): void; + removeAll(): void; + destroy(): void; + + } + export class TextureGarbageCollector { + + constructor(renderer: WebGLRenderer); + + renderer: WebGLRenderer; + count: number; + checkCount: number; + maxIdle: number; + checkCountMax: number; + mode: number; + + update(): void; + run(): void; + unload(): void; + + } + export abstract class ObjectRenderer extends WebGLManager { + + constructor(renderer: WebGLRenderer); + + start(): void; + stop(): void; + flush(): void; + + render(...args: any[]): void; + + } + export class Quad { + + constructor(gl: WebGLRenderingContext); + + gl: WebGLRenderingContext; + vertices: number[]; + uvs: number[]; + interleaved: number[]; + indices: number[]; + vertexBuffer: WebGLBuffer; + vao: glCore.VertexArrayObject; + initVao(shader: glCore.GLShader): void; + map(targetTextureFrame: Rectangle, destinationFrame: Rectangle): Quad; + draw(): Quad; + upload(): Quad; + destroy(): void; + + } + export class RenderTarget { + + constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number, resolution: number, root?: boolean); + + gl: WebGLRenderingContext; + frameBuffer: glCore.GLFramebuffer; + texture: Texture; + clearColor: number[]; + size: Rectangle; + resolution: number; + projectionMatrix: Matrix; + transform: Matrix; + frame: Rectangle; + defaultFrame: Rectangle; + destinationFrame: Rectangle; + sourceFrame: Rectangle; + stencilBuffer: glCore.GLFramebuffer; + stencilMaskStack: Graphics[]; + filterData: { + index: number, + stack: { + renderTarget: RenderTarget, + filter: any[]; + bounds: Rectangle + }[] + }; + scaleMode: number; + root: boolean; + + clear(clearColor?: number[]): void; + attachStencilBuffer(): void; + setFrame(destinationFrame: Rectangle, sourceFrame: Rectangle): void; + activate(): void; + calculateProjection(destinationFrame: Rectangle, sourceFrame: Rectangle): void; resize(width: number, height: number): void; destroy(): void; } - export class MaskManager extends WebGLManager { - - stencilStack: StencilMaskStack; - reverse: boolean; - count: number; - alphaMaskPool: any[]; - - pushMask(target: RenderTarget, maskData: any): void; - popMask(target: RenderTarget, maskData: any): void; - pushSpriteMask(target: RenderTarget, maskData: any): void; - popSpriteMask(): void; - pushStencilMask(target: RenderTarget, maskData: any): void; - popStencilMask(target: RenderTarget, maskData: any): void; - - } - export class ShaderManager extends WebGLManager { - - protected _currentId: number; - protected currentShader: Shader; + export class BlendModeManager extends WebGLManager { constructor(renderer: WebGLRenderer); - maxAttibs: number; - attribState: any[]; - tempAttribState: any[]; - stack: any[]; + currentBlendMode: number; - setAttribs(attribs: any[]): void; - setShader(shader: Shader): boolean; - destroy(): void; + setBlendMode(blendMode: number): boolean; } - export class StencilManager extends WebGLManager { + export class FilterManager extends WebGLManager { constructor(renderer: WebGLRenderer); - setMaskStack(stencilMaskStack: StencilMaskStack): void; - pushStencil(graphics: Graphics, webGLData: WebGLGraphicsData): void; - bindGraphics(graphics: Graphics, webGLData: WebGLGraphicsData): void; - popStencil(graphics: Graphics, webGLData: WebGLGraphicsData): void; - destroy(): void; - pushMask(maskData: any[]): void; - popMask(maskData: any[]): void; - - } - export class WebGLManager { - - protected onContextChange: () => void; - - constructor(renderer: WebGLRenderer); - - renderer: WebGLRenderer; - - destroy(): void; - - } - export class Shader { - - protected attributes: any; - protected textureCount: number; - protected uniforms: any; - - protected _glCompile(type: any, src: any): Shader; - - constructor(shaderManager: ShaderManager, vertexSrc: string, fragmentSrc: string, uniforms: any, attributes: any); - - uuid: number; gl: WebGLRenderingContext; - shaderManager: ShaderManager; - program: WebGLProgram; - vertexSrc: string; - fragmentSrc: string; + quad: Quad; + stack: { + renderTarget: RenderTarget; + sourceFrame: Rectangle; + destinationFrame: Rectangle; + filters: Filter[]; + target: any; + resolution: number; + }[]; + stackIndex: number; + shaderCache: any; + filterData: any; - init(): void; - cacheUniformLocations(keys: string[]): void; - cacheAttributeLocations(keys: string[]): void; - compile(): WebGLProgram; - syncUniform(uniform: any): void; - syncUniforms(): void; - initSampler2D(uniform: any): void; + pushFilter(target: RenderTarget, filters: Filter[]): void; + popFilter(): void; + applyFilter(shader: glCore.GLShader | Filter, inputTarget: RenderTarget, outputTarget: RenderTarget, clear?: boolean): void; + syncUniforms(shader: glCore.GLShader, filter: Filter): void; + getRenderTarget(clear?: boolean, resolution?: number): RenderTarget; + returnRenderTarget(renderTarget: RenderTarget): RenderTarget; + calculateScreenSpaceMatrix(outputMatrix: Matrix): Matrix; + calculateNormalisedScreenSpaceMatrix(outputMatrix: Matrix): Matrix; + calculateSpriteMatrix(outputMatrix: Matrix, sprite: Sprite): Matrix; destroy(): void; + emptyPool(): void; + getPotRenderTarget(gl: WebGLRenderingContext, minWidth: number, minHeight: number, resolution: number): RenderTarget; + freePotRenderTarget(renderTarget: RenderTarget): void; } - export class ComplexPrimitiveShader extends Shader { - - constructor(shaderManager: ShaderManager); - - } - export class PrimitiveShader extends Shader { - - constructor(shaderManager: ShaderManager); - - } - export class TextureShader extends Shader { - - constructor(shaderManager: ShaderManager, vertexSrc?: string, fragmentSrc?: string, customUniforms?: any, customAttributes?: any); - - } - export interface StencilMaskStack { + export class StencilMaskStack { stencilStack: any[]; reverse: boolean; count: number; } - export class ObjectRenderer extends WebGLManager { + export class MaskManager extends WebGLManager { - start(): void; - stop(): void; - flush(): void; - render(object?: any): void; + scissor: boolean; + scissorData: any; + scissorRenderTarget: RenderTarget; + enableScissor: boolean; + alphaMaskPool: number[]; + alphaMaskIndex: number; + pushMask(target: RenderTarget, maskData: Sprite | Graphics): void; + popMask(target: RenderTarget, maskData: Sprite | Graphics): void; + pushSpriteMask(target: RenderTarget, maskData: Sprite | Graphics): void; + popSpriteMask(): void; + pushStencilMask(maskData: Sprite | Graphics): void; + popStencilMask(): void; + pushScissorMask(target: RenderTarget, maskData: Sprite | Graphics): void; + popScissorMask(): void; } - export class RenderTarget { + export class StencilManager extends WebGLManager { - constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number, resolution: number, root: boolean); + constructor(renderer: WebGLRenderer); - gl: WebGLRenderingContext; - frameBuffer: WebGLFramebuffer; - texture: Texture; - size: Rectangle; + stencilMaskStack: Graphics[]; + + setMaskStack(stencilMasStack: Graphics[]): void; + pushStencil(graphics: Graphics): void; + popStencil(): void; + destroy(): void; + + } + export class WebGLManager { + + constructor(renderer: WebGLRenderer); + + renderer: WebGLRenderer; + onContextChange: () => void; + destroy(): void; + + } + export interface IUniformData { + + type: string; + value: any; + + // name is set by pixi if uniforms were automatically extracted from shader code, but not used anywhere + name?: string; + + } + export class Filter { + + // param uniforms should be an object matching type {[name: string]: IUniformData}; + // left untyped as there's no way to define the type without requiring an index signature or making this class generic + constructor(vertexSrc?: string, fragmentSrc?: string, uniforms?: any); + + vertextSrc: string; + fragmentSrc: string; + protected uniformData: { [name: string]: IUniformData }; + uniforms: { [name: string]: any }; + glShaders: any; + glShaderKey: string; + padding: number; resolution: number; - projectionMatrix: Matrix; - transform: Matrix; - frame: Rectangle; - stencilBuffer: WebGLRenderbuffer; - stencilMaskStack: StencilMaskStack; - filterStack: any[]; - scaleMode: number; - root: boolean; + blendMode: number; + enabled: boolean; + apply(filterManager: FilterManager, input: RenderTarget, output: RenderTarget, clear?: boolean): void; - clear(bind?: boolean): void; - attachStencilBuffer(): void; - activate(): void; - calculateProjection(protectionFrame: Matrix): void; - resize(width: number, height: number): void; - destroy(): void; + static defaultVertexSrc: string; + static defaultFragmentSrc: string; } - export interface Quad { + export class SpriteMaskFilter extends Filter { - gl: WebGLRenderingContext; - vertices: number[]; - uvs: number[]; - colors: number[]; - indices: number[]; - vertexBuffer: WebGLBuffer; - indexBuffer: WebGLBuffer; + constructor(sprite: Sprite); - map(rect: Rectangle, rect2: Rectangle): void; - upload(): void; - destroy(): void; + maskSprite: Sprite; + maskMatrix: Matrix; + apply(filterManager: FilterManager, input: RenderTarget, output: RenderTarget): void; } - //sprites + // sprites export class Sprite extends Container { - static fromFrame(frameId: string): Sprite; - static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite; + constructor(texture?: Texture); + protected _anchor: ObservablePoint; + anchor: ObservablePoint; protected _texture: Texture; protected _width: number; protected _height: number; - protected cachedTint: number; - - protected _onTextureUpdate(): void; - - constructor(texture?: Texture); - - anchor: Point; tint: number; + protected _tint: number; + protected _tintRGB: number; blendMode: number; - shader: Shader | AbstractFilter; + shader: glCore.GLShader | Filter; + protected cachedTint: number; texture: Texture; - + protected textureDirty: boolean; + protected _textureID: number; + protected _transformID: number; + protected vertexTrimmedData: Float32Array; + vertexData: Float32Array; width: number; height: number; - getBounds(matrix?: Matrix): Rectangle; + protected _onTextureUpdate(): void; + calculateVertices(): void; + protected _calculateBounds(): void; + protected calculateTrimmedVertices(): void; + protected onAnchorUpdate(): void; + protected _renderWebGL(renderer: WebGLRenderer): void; + protected _renderCanvas(renderer: CanvasRenderer): void; getLocalBounds(): Rectangle; containsPoint(point: Point): boolean; - destroy(destroyTexture?: boolean, destroyBaseTexture?: boolean): void; + destroy(options?: IDestroyOptions | boolean): void; + + static from(source: number | string | BaseTexture | HTMLCanvasElement | HTMLVideoElement): Sprite; + static fromFrame(frameId: string): Sprite; + static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite; + + } + export class BatchBuffer { + + vertices: ArrayBuffer; + float32View: number[]; + uint32View: number[]; + + destroy(): void; } export class SpriteRenderer extends ObjectRenderer { - protected renderBatch(texture: Texture, size: number, startIndex: number): void; + constructor(renderer: PIXI.WebGLRenderer); vertSize: number; vertByteSize: number; size: number; - vertices: number[]; - positions: number[]; - colors: number[]; + buffers: BatchBuffer[]; indices: number[]; - currentBatchSize: number; + shaders: Shader[]; + currentIndex: number; + tick: number; + groups: any[]; sprites: Sprite[]; - shader: Shader | AbstractFilter; + vertexBuffers: number[]; + vaos: glCore.VertexArrayObject[]; + vaoMax: number; + vertexCount: number; + protected onContextChanged: () => void; + protected onPrerender: () => void; render(sprite: Sprite): void; flush(): void; start(): void; + stop(): void; destroy(): void; } + export class CanvasSpriteRenderer extends ObjectRenderer { - //text + constructor(renderer: WebGLRenderer); - export interface TextStyle { + render(sprite: Sprite): void; + destroy(): void; + + } + export module CanvasTinter { + + export function getTintedTexture(sprite: Sprite, color: number): HTMLCanvasElement; + export function tintWithMultiply(texture: Texture, color: number, canvas: HTMLCanvasElement): void; + export function tintWithOverlay(texture: Texture, color: number, canvas: HTMLCanvasElement): void; + export function tintWithPerPixel(texture: Texture, color: number, canvas: HTMLCanvasElement): void; + export function roundColor(color: number): number; + + export var cacheStepsPerColorChannel: number; + export var convertTintToImage: boolean; + export var canUseMultiply: boolean; + export var tintMethod: Function; + + } + + // text + + export class TextStyle { - font?: string; - fill?: string | number; align?: string; - stroke?: string | number; - strokeThickness?: number; - wordWrap?: boolean; - wordWrapWidth?: number; - lineHeight?: number; + breakWords?: boolean; dropShadow?: boolean; - dropShadowColor?: string | number; dropShadowAngle?: number; + dropShadowBlur?: number; + dropShadowColor?: string | number; dropShadowDistance?: number; - padding?: number; - textBaseline?: string; + fill?: string | string[] | number | number[] | CanvasGradient | CanvasPattern; + fillGradientType?: number; + fontFamily?: string; + fontSize?: number | string; + fontStyle?: string; + fontVariant?: string; + fontWeight?: string; + letterSpacing?: number; + lineHeight?: number; lineJoin?: string; miterLimit?: number; + padding?: number; + stroke?: string | number; + strokeThickness?: number; + styleID?: number; + textBaseline?: string; + wordWrap?: boolean; + wordWrapWidth?: number; } export class Text extends Sprite { + static getFontStyle(style: TextStyle): string; + static calculateFontProperties(style: string): any; + + constructor(text?: string, style?: TextStyle); + + canvas: HTMLCanvasElement; + context: CanvasRenderingContext2D; + resolution: number; + protected _text: string; + protected _style: TextStyle; + protected _styleListener: Function; + protected _font: string; + protected localStyleID: number; + static fontPropertiesCache: any; static fontPropertiesCanvas: HTMLCanvasElement; static fontPropertiesContext: CanvasRenderingContext2D; - protected _text: string; - protected _style: TextStyle; - - protected updateText(): void; - protected updateTexture(): void; - protected determineFontProperties(fontStyle: TextStyle): TextStyle; - protected wordWrap(text: string): boolean; - - constructor(text?: string, style?: TextStyle, resolution?: number); - - canvas: HTMLCanvasElement; - context: CanvasRenderingContext2D; - dirty: boolean; - resolution: number; - text: string; - style: TextStyle; - width: number; height: number; + style: TextStyle; + text: string; + + protected updateText(respectDirty?: boolean): void; + protected drawLetterSpacing(text: string, x: number, y: number, isStroke?: boolean): void; + protected updateTexture(): void; + renderWebGL(renderer: WebGLRenderer): void; + protected _renderCanvas(renderer: CanvasRenderer): void; + protected wordWrap(text: string): string; + protected _calculateBounds(): void; + protected _onStyleChange: () => void; + protected _generateFillStyle(style: string | number | CanvasGradient, lines: number): string | number | CanvasGradient; + destroy(options?: IDestroyOptions | boolean): void; + dirty: boolean; } - //textures + // textures - export class BaseTexture extends EventEmitter { + export class BaseRenderTexture extends BaseTexture { - static fromImage(imageUrl: string, crossorigin?: boolean, scaleMode?: number): BaseTexture; - static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): BaseTexture; + constructor(width?: number, height?: number, scaleMode?: number, resolution?: number); - protected _glTextures: any; + height: number; + width: number; + realHeight: number; + realWidth: number; + resolution: number; + scaleMode: number; + hasLoaded: boolean; + protected _glRenderTargets: { [n: number]: WebGLTexture; }; + protected _canvasRenderTarget: { [n: number]: WebGLTexture; }; + valid: boolean; - protected _sourceLoaded(): void; + resize(width: number, height: number): void; + destroy(): void; - constructor(source: HTMLImageElement | HTMLCanvasElement, scaleMode?: number, resolution?: number); + once(event: "update", fn: (baseRenderTexture: BaseRenderTexture) => void, context?: any): utils.EventEmitter; + once(event: string, fn: Function, context?: any): utils.EventEmitter; + on(event: "update", fn: (baseRenderTexture: BaseRenderTexture) => void, context?: any): utils.EventEmitter; + on(event: string, fn: Function, context?: any): utils.EventEmitter; + off(event: string, fn: Function, context?: any): utils.EventEmitter; - uuid: number; + } + export class BaseTexture extends utils.EventEmitter { + + constructor(source?: HTMLImageElement | HTMLCanvasElement, scaleMode?: number, resolution?: number); + + protected uuid: number; + protected touched: number; resolution: number; width: number; height: number; @@ -981,90 +1384,104 @@ declare namespace PIXI { scaleMode: number; hasLoaded: boolean; isLoading: boolean; - source: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement; + wrapMode: number; + source: HTMLImageElement | HTMLCanvasElement; + origSource: HTMLImageElement; + imageType: string; + sourceScale: number; premultipliedAlpha: boolean; imageUrl: string; - isPowerOfTwo: boolean; + protected isPowerOfTwo: boolean; mipmap: boolean; + wrap: boolean; + protected _glTextures: any; + protected _enabled: number; + protected _id: number; update(): void; + protected _updateImageType(): void; + protected _loadSvgSource(): void; + protected _loadSvgSourceUsingDataUri(dataUri: string): void; + protected _loadSvgSourceUsingXhr(): void; + protected _loadSvgSourceUsingString(svgString: string): void; loadSource(source: HTMLImageElement | HTMLCanvasElement): void; + protected _sourceLoaded(): void; destroy(): void; dispose(): void; updateSourceImage(newSrc: string): void; - on(event: 'dispose', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; - on(event: 'error', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; - on(event: 'loaded', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; - on(event: 'update', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; - on(event: string, fn: Function, context?: any): EventEmitter; + static fromImage(imageUrl: string, crossorigin?: boolean, scaleMode?: number, sourceScale?: number): BaseTexture; + static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): BaseTexture; - once(event: 'dispose', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; - once(event: 'error', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; - once(event: 'loaded', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; - once(event: 'update', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; - once(event: string, fn: Function, context?: any): EventEmitter; + on(event: "update", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter; + on(event: "loaded", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter; + on(event: "error", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter; + on(event: "dispose", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter; + on(event: string, fn: Function, context?: any): utils.EventEmitter; + once(event: "update", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter; + once(event: "loaded", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter; + once(event: "error", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter; + once(event: "dispose", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter; + once(event: string, fn: Function, context?: any): utils.EventEmitter; + off(event: string, fn: Function, context?: any): utils.EventEmitter; } export class RenderTexture extends Texture { - protected renderWebGL(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void; - protected renderCanvas(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void; + constructor(baseRenderTexture: BaseRenderTexture, frame?: Rectangle); - constructor(renderer: CanvasRenderer | WebGLRenderer, width?: number, height?: number, scaleMode?: number, resolution?: number); - - width: number; - height: number; - resolution: number; - renderer: CanvasRenderer | WebGLRenderer; + protected legacyRenderer: any; valid: boolean; - render(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void; - resize(width: number, height: number, updateBase?: boolean): void; - clear(): void; - destroy(): void; - getImage(): HTMLImageElement; - getPixels(): number[]; - getPixel(x: number, y: number): number[]; - getBase64(): string; - getCanvas(): HTMLCanvasElement; + resize(width: number, height: number, doNotResizeBaseTexture?: boolean): void; + + static create(width?: number, height?: number, scaleMode?: number, resolution?: number): RenderTexture; } - export class Texture extends BaseTexture { + export class Texture extends utils.EventEmitter { - static fromImage(imageUrl: string, crossOrigin?: boolean, scaleMode?: number): Texture; + constructor(baseTexture: BaseTexture, frame?: Rectangle, orig?: Rectangle, trim?: Rectangle, rotate?: number); + + noFrame: boolean; + baseTexture: BaseTexture; + protected _frame: Rectangle; + trim: Rectangle; + valid: boolean; + requiresUpdate: boolean; + protected _uvs: TextureUvs; + orig: Rectangle; + protected _updateID: number; + transform: any; + + update(): void; + protected onBaseTextureLoaded(baseTexture: BaseTexture): void; + protected onBaseTextureUpdated(baseTexture: BaseTexture): void; + destroy(destroyBase?: boolean): void; + clone(): Texture; + protected _updateUvs(): void; + + static fromImage(imageUrl: string, crossOrigin?: boolean, scaleMode?: number, sourceScale?: number): Texture; static fromFrame(frameId: string): Texture; static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): Texture; static fromVideo(video: HTMLVideoElement | string, scaleMode?: number): Texture; static fromVideoUrl(videoUrl: string, scaleMode?: number): Texture; + static from(source: number | string | BaseTexture | HTMLCanvasElement | HTMLVideoElement): Texture; static addTextureToCache(texture: Texture, id: string): void; static removeTextureFromCache(id: string): Texture; - static EMPTY: Texture; - - protected _frame: Rectangle; - protected _uvs: TextureUvs; - - protected onBaseTextureUpdated(baseTexture: BaseTexture): void; - protected onBaseTextureLoaded(baseTexture: BaseTexture): void; - protected _updateUvs(): void; - - constructor(baseTexture: BaseTexture, frame?: Rectangle, crop?: Rectangle, trim?: Rectangle, rotate?: boolean); - - noFrame: boolean; - baseTexture: BaseTexture; - trim: Rectangle; - valid: boolean; - requiresUpdate: boolean; - width: number; - height: number; - crop: Rectangle; - rotate: boolean; frame: Rectangle; + protected _rotate: boolean; + rotate: number; + width: number; + height: number; - update(): void; - destroy(destroyBase?: boolean): void; - clone(): Texture; + static EMPTY: Texture; + + on(event: "update", fn: (texture: Texture) => void, context?: any): utils.EventEmitter; + on(event: string, fn: Function, context?: any): utils.EventEmitter; + once(event: "update", fn: (texture: Texture) => void, context?: any): utils.EventEmitter; + once(event: string, fn: Function, context?: any): utils.EventEmitter; + off(event: string, fn: Function, context?: any): utils.EventEmitter; } export class TextureUvs { @@ -1078,645 +1495,43 @@ declare namespace PIXI { x3: number; y3: number; - set(frame: Rectangle, baseFrame: Rectangle, rotate: boolean): void; + uvsUint32: Uint32Array; + + protected set(frame: Rectangle, baseFrame: Rectangle, rotate: number): void; } export class VideoBaseTexture extends BaseTexture { - static fromVideo(video: HTMLVideoElement, scaleMode?: number): VideoBaseTexture; - static fromUrl(videoSrc: string | any | string[] | any[]): VideoBaseTexture; - - protected _loaded: boolean; - protected _onUpdate(): void; - protected _onPlayStart(): void; - protected _onPlayStop(): void; - protected _onCanPlay(): void; - constructor(source: HTMLVideoElement, scaleMode?: number); autoUpdate: boolean; + autoPlay: boolean; + protected _isAutoUpdating: boolean; + update(): void; + protected _onCanPlay(): void; + protected _onPlayStart(): void; + protected _onPlayStop(): void; destroy(): void; + protected _isSourcePlaying(): boolean; + protected _isSourceReady(): boolean; + + static fromVideo(video: HTMLVideoElement, scaleMode?: number): VideoBaseTexture; + static fromUrl(videoSrc: string | any | string[] | any[]): VideoBaseTexture; + static fromUrls(videoSrc: string | any | string[] | any[]): VideoBaseTexture; } - //utils + // ticker - export class utils { - - static uuid(): number; - static hex2rgb(hex: number, out?: number[]): number[]; - static hex2string(hex: number): string; - static rgb2hex(rgb: Number[]): number; - static canUseNewCanvasBlendModel(): boolean; - static getNextPowerOfTwo(number: number): number; - static isPowerOfTwo(width: number, height: number): boolean; - static getResolutionOfUrl(url: string): number; - static sayHello(type: string): void; - static isWebGLSupported(): boolean; - static sign(n: number): number; - static TextureCache: any; - static BaseTextureCache: any; - - } - - ////////////////////////////////////////////////////////////////////////////// - ////////////////////////////EXTRAS//////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////// - - export module extras { - - export interface BitmapTextStyle { - - font?: string | { - - name?: string; - size?: number; - - }; - align?: string; - tint?: number; - - } - export class BitmapText extends Container { - - static fonts: any; - - protected _glyphs: Sprite[]; - protected _font: string | { - tint: number; - align: string; - name: string; - size: number; - }; - protected _text: string; - - protected updateText(): void; - - constructor(text: string, style?: BitmapTextStyle); - - textWidth: number; - textHeight: number; - maxWidth: number; - maxLineHeight: number; - dirty: boolean; - - tint: number; - align: string; - font: string | { - tint: number; - align: string; - name: string; - size: number; - }; - text: string; - - } - export class MovieClip extends Sprite { - - static fromFrames(frame: string[]): MovieClip; - static fromImages(images: string[]): MovieClip; - - protected _textures: Texture[]; - protected _durations: number[]; - protected _currentTime: number; - - protected update(deltaTime: number): void; - - constructor(textures: Texture[]); - - animationSpeed: number; - loop: boolean; - onComplete: () => void; - currentFrame: number; - playing: boolean; - - totalFrames: number; - textures: Texture[]; - - stop(): void; - play(): void; - gotoAndStop(frameName: number): void; - gotoAndPlay(frameName: number): void; - destroy(): void; - - } - export class TilingSprite extends Sprite { - - //This is really unclean but is the only way :( - //See http://stackoverflow.com/questions/29593905/typescript-declaration-extending-class-with-static-method/29595798#29595798 - //Thanks bas! - static fromFrame(frameId: string): Sprite; - static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite; - - static fromFrame(frameId: string, width?: number, height?: number): TilingSprite; - static fromImage(imageId: string, width?: number, height?: number, crossorigin?: boolean, scaleMode?: number): TilingSprite; - - protected _tileScaleOffset: Point; - protected _tilingTexture: boolean; - protected _refreshTexture: boolean; - protected _uvs: TextureUvs[]; - - constructor(texture: Texture, width: number, height: number); - - tileScale: Point; - tilePosition: Point; - - width: number; - height: number; - originalTexture: Texture; - - getBounds(): Rectangle; - generateTilingTexture(renderer: WebGLRenderer | CanvasRenderer, texture: Texture, forcePowerOfTwo?: boolean): Texture; - containsPoint(point: Point): boolean; - destroy(): void; - - } - - } - - ////////////////////////////////////////////////////////////////////////////// - ///////////////////////////////FILTERS//////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////// - - namespace filters { - - export class AsciiFilter extends AbstractFilter { - size: number; - } - export class BloomFilter extends AbstractFilter { - - blur: number; - blurX: number; - blurY: number; - - } - export class BlurFilter extends AbstractFilter { - - protected blurXFilter: BlurXFilter; - protected blurYFilter: BlurYFilter; - - blur: number; - passes: number; - blurX: number; - blurY: number; - - } - export class BlurXFilter extends AbstractFilter { - - passes: number; - strength: number; - blur: number; - - } - export class BlurYFilter extends AbstractFilter { - - passes: number; - strength: number; - blur: number; - - } - export class SmartBlurFilter extends AbstractFilter { - - } - export class ColorMatrixFilter extends AbstractFilter { - - protected _loadMatrix(matrix: number[], multiply: boolean): void; - protected _multiply(out: number[], a: number[], b: number[]): void; - protected _colorMatrix(matrix: number[]): void; - - matrix: number[]; - - brightness(b: number, multiply?: boolean): void; - greyscale(scale: number, multiply?: boolean): void; - blackAndWhite(multiply?: boolean): void; - hue(rotation: number, multiply?: boolean): void; - contrast(amount: number, multiply?: boolean): void; - saturate(amount: number, multiply?: boolean): void; - desaturate(multiply?: boolean): void; - negative(multiply?: boolean): void; - sepia(multiply?: boolean): void; - technicolor(multiply?: boolean): void; - polaroid(multiply?: boolean): void; - toBGR(multiply?: boolean): void; - kodachrome(multiply?: boolean): void; - browni(multiply?: boolean): void; - vintage(multiply?: boolean): void; - colorTone(desaturation: number, toned: number, lightColor: string, darkColor: string, multiply?: boolean): void; - night(intensity: number, multiply?: boolean): void; - predator(amount: number, multiply?: boolean): void; - lsd(multiply?: boolean): void; - reset(): void; - - } - export class ColorStepFilter extends AbstractFilter { - - step: number; - - } - export class ConvolutionFilter extends AbstractFilter { - - constructor(matrix: number[], width: number, height: number); - - matrix: number[]; - width: number; - height: number; - - } - export class CrossHatchFilter extends AbstractFilter { - - } - export class DisplacementFilter extends AbstractFilter { - - constructor(sprite: Sprite, scale?: number); - - map: Texture; - - scale: Point; - - } - export class DotScreenFilter extends AbstractFilter { - - scale: number; - angle: number; - - } - export class BlurYTintFilter extends AbstractFilter { - - blur: number; - - } - export class DropShadowFilter extends AbstractFilter { - - blur: number; - blurX: number; - blurY: number; - color: number; - alpha: number; - distance: number; - angle: number; - - } - export class GrayFilter extends AbstractFilter { - - gray: number; - - } - export class InvertFilter extends AbstractFilter { - - invert: number; - - } - export class NoiseFilter extends AbstractFilter { - - noise: number; - - } - export class PixelateFilter extends AbstractFilter { - - size: Point; - - } - export class RGBSplitFilter extends AbstractFilter { - - red: number; - green: number; - blue: number; - - } - export class SepiaFilter extends AbstractFilter { - - sepia: number; - - } - export class ShockwaveFilter extends AbstractFilter { - - center: number[]; - params: any; - time: number; - - } - export class TiltShiftAxisFilter extends AbstractFilter { - - blur: number; - gradientBlur: number; - start: number; - end: number; - - updateDelta(): void; - - } - export class TiltShiftFilter extends AbstractFilter { - - blur: number; - gradientBlur: number; - start: number; - end: number; - - } - export class TiltShiftXFilter extends AbstractFilter { - - updateDelta(): void; - - } - export class TiltShiftYFilter extends AbstractFilter { - - updateDelta(): void; - - } - export class TwistFilter extends AbstractFilter { - - offset: Point; - radius: number; - angle: number; - - } - export class FXAAFilter extends AbstractFilter { - - applyFilter(renderer: WebGLRenderer, input: RenderTarget, output: RenderTarget): void; - - } - } - - ////////////////////////////////////////////////////////////////////////////// - ////////////////////////////INTERACTION/////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////// - - export module interaction { - - export interface InteractionEvent { - - stopped: boolean; - target: any; - type: string; - data: InteractionData; - stopPropagation(): void; - - } - - export class InteractionData { - - global: Point; - target: DisplayObject; - originalEvent: Event; - identifier: number; - - getLocalPosition(displayObject: DisplayObject, point?: Point, globalPos?: Point): Point; - - } - - export class InteractionManager { - - protected interactionDOMElement: HTMLElement; - protected eventsAdded: boolean; - protected _tempPoint: Point; - - protected setTargetElement(element: HTMLElement, resolution: number): void; - protected addEvents(): void; - protected removeEvents(): void; - protected dispatchEvent(displayObject: DisplayObject, eventString: string, eventData: any): void; - protected onMouseDown: (event: Event) => void; - protected processMouseDown: (displayObject: DisplayObject, hit: boolean) => void; - protected onMouseUp: (event: Event) => void; - protected processMouseUp: (displayObject: DisplayObject, hit: boolean) => void; - protected onMouseMove: (event: Event) => void; - protected processMouseMove: (displayObject: DisplayObject, hit: boolean) => void; - protected onMouseOut: (event: Event) => void; - protected processMouseOverOut: (displayObject: DisplayObject, hit: boolean) => void; - protected onTouchStart: (event: Event) => void; - protected processTouchStart: (DisplayObject: DisplayObject, hit: boolean) => void; - protected onTouchEnd: (event: Event) => void; - protected processTouchEnd: (displayObject: DisplayObject, hit: boolean) => void; - protected onTouchMove: (event: Event) => void; - protected processTouchMove: (displayObject: DisplayObject, hit: boolean) => void; - protected getTouchData(touchEvent: InteractionData): InteractionData; - protected returnTouchData(touchData: InteractionData): void; - - constructor(renderer: CanvasRenderer | WebGLRenderer, options?: { autoPreventDefault?: boolean; interactionFrequence?: number; }); - - renderer: CanvasRenderer | WebGLRenderer; - autoPreventDefault: boolean; - interactionFrequency: number; - mouse: InteractionData; - eventData: { - stopped: boolean; - target: any; - type: any; - data: InteractionData; - }; - interactiveDataPool: InteractionData[]; - last: number; - currentCursorStyle: string; - resolution: number; - update(deltaTime: number): void; - - mapPositionToPoint(point: Point, x: number, y: number): void; - processInteractive(point: Point, displayObject: DisplayObject, func: (displayObject: DisplayObject, hit: boolean) => void, hitTest: boolean, interactive: boolean): boolean; - destroy(): void; - - } - - export interface InteractiveTarget { - - interactive: boolean; - buttonMode: boolean; - interactiveChildren: boolean; - defaultCursor: string; - hitArea: HitArea; - - } - - } - - ////////////////////////////////////////////////////////////////////////////// - ///////////////////////////////LOADER///////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////// - //https://github.com/englercj/resource-loader/blob/master/src/Loader.js - - export module loaders { - export interface LoaderOptions { - - crossOrigin?: boolean; - loadType?: number; - xhrType?: string; - - } - export interface ResourceDictionary { - - [index: string]: PIXI.loaders.Resource; - } - export class Loader extends EventEmitter { - - constructor(baseUrl?: string, concurrency?: number); - - baseUrl: string; - progress: number; - loading: boolean; - resources: ResourceDictionary; - - add(name: string, url: string, options?: LoaderOptions, cb?: () => void): Loader; - add(url: string, options?: LoaderOptions, cb?: () => void): Loader; - //todo I am not sure of object literal notional (or its options) so just allowing any but would love to improve this - add(obj: any, options?: LoaderOptions, cb?: () => void): Loader; - - on(event: 'complete', fn: (loader: loaders.Loader, object: any) => void, context?: any): EventEmitter; - on(event: 'error', fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; - on(event: 'load', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; - on(event: 'progress', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; - on(event: 'start', fn: (loader: loaders.Loader) => void, context?: any): EventEmitter; - on(event: string, fn: Function, context?: any): EventEmitter; - - once(event: 'complete', fn: (loader: loaders.Loader, object: any) => void, context?: any): EventEmitter; - once(event: 'error', fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; - once(event: 'load', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; - once(event: 'progress', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; - once(event: 'start', fn: (loader: loaders.Loader) => void, context?: any): EventEmitter; - once(event: string, fn: Function, context?: any): EventEmitter; - - before(fn: Function): Loader; - pre(fn: Function): Loader; - - after(fn: Function): Loader; - use(fn: Function): Loader; - - reset(): void; - - load(cb?: (loader: loaders.Loader, object: any) => void): Loader; - - } - export class Resource extends EventEmitter { - - static LOAD_TYPE: { - XHR: number; - IMAGE: number; - AUDIO: number; - VIDEO: number; - }; - - static XHR_READ_STATE: { - UNSENT: number; - OPENED: number; - HEADERS_RECIEVED: number; - LOADING: number; - DONE: number; - }; - - static XHR_RESPONSE_TYPE: { - DEFAULT: number; - BUFFER: number; - BLOB: number; - DOCUMENT: number; - JSON: number; - TEXT: number; - }; - - constructor(name?: string, url?: string | string[], options?: LoaderOptions); - - name: string; - texture: Texture; - textures: Texture[]; - url: string; - data: any; - crossOrigin: string; - loadType: number; - xhrType: string; - error: Error; - xhr: XMLHttpRequest; - - complete(): void; - load(cb?: () => void): void; - - } - } - - ////////////////////////////////////////////////////////////////////////////// - ///////////////////////////////MESH/////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////// - - export module mesh { - - export class Mesh extends Container { - - static DRAW_MODES: { - TRIANGLE_MESH: number; - TRIANGLES: number; - }; - - constructor(texture: Texture, vertices?: number[], uvs?: number[], indices?: number[], drawMode?: number); - - texture: Texture; - uvs: number[]; - vertices: number[]; - indices: number[]; - dirty: boolean; - blendMode: number; - canvasPadding: number; - drawMode: number; - shader: Shader | AbstractFilter; - - getBounds(matrix?: Matrix): Rectangle; - containsPoint(point: Point): boolean; - - protected _texture: Texture; - - protected _renderCanvasTriangleMesh(context: CanvasRenderingContext2D): void; - protected _renderCanvasTriangles(context: CanvasRenderingContext2D): void; - protected _renderCanvasDrawTriangle(context: CanvasRenderingContext2D, vertices: number, uvs: number, index0: number, index1: number, index2: number): void; - protected renderMeshFlat(Mesh: Mesh): void; - protected _onTextureUpdate(): void; - - } - export class Rope extends Mesh { - - protected _ready: boolean; - - protected getTextureUvs(): TextureUvs; - - constructor(texture: Texture, points: Point[]); - - points: Point[]; - colors: number[]; - - refresh(): void; - - } - export class Plane extends Mesh { - - segmentsX: number; - segmentsY: number; - - constructor(texture: Texture, segmentsX?: number, segmentsY?: number); - - } - - - export class MeshRenderer extends ObjectRenderer { - - protected _initWebGL(mesh: Mesh): void; - - indices: number[]; - - constructor(renderer: WebGLRenderer); - - render(mesh: Mesh): void; - flush(): void; - start(): void; - destroy(): void; - - } - - export interface MeshShader extends Shader { } - - } - - namespace ticker { + module ticker { export var shared: Ticker; export class Ticker { protected _tick(time: number): void; - protected _emitter: EventEmitter; + protected _emitter: utils.EventEmitter; protected _requestId: number; protected _maxElapsedMS: number; @@ -1744,4 +1559,1078 @@ declare namespace PIXI { } } -} \ No newline at end of file + + // shader + + export class Shader extends glCore.GLShader { } + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////EXTRACT/////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module extract { + + export class CanvasExtract { + + protected renderer: CanvasRenderer; + + constructor(renderer: CanvasRenderer); + + image(target?: DisplayObject | RenderTexture): HTMLImageElement; + base64(target?: DisplayObject | RenderTexture): string; + canvas(target?: DisplayObject | RenderTexture): HTMLCanvasElement; + pixels(renderTexture?: DisplayObject | RenderTexture): number[]; + + destroy(): void; + + } + export class WebGLExtract { + protected renderer: CanvasRenderer; + + constructor(renderer: CanvasRenderer); + + image(target?: DisplayObject | RenderTexture): HTMLImageElement; + base64(target?: DisplayObject | RenderTexture): string; + canvas(target?: DisplayObject | RenderTexture): HTMLCanvasElement; + pixels(renderTexture?: DisplayObject | RenderTexture): number[]; + + destroy(): void; + } + + } + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////EXTRAS//////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module extras { + + export interface IBitmapTextStyle { + + font?: string | { + + name?: string; + size?: number; + + }; + align?: string; + tint?: number; + + } + export class BitmapText extends Container { + + constructor(text: string, style?: IBitmapTextStyle); + + textWidth: number; + textHeight: number; + protected _glyphs: Sprite[]; + protected _font: string | { + name?: string; + size?: number; + }; + font: string | { + name?: string; + size?: number; + }; + protected _text: string; + maxWidth: number; + maxLineHeight: number; + dirty: boolean; + tint: number; + align: string; + text: string; + anchor: PIXI.Point | number; + + protected updateText(): void; + updateTransform(): void; + getLocalBounds(): Rectangle; + validate(): void; + + static fonts: any; + + } + export class AnimatedSprite extends Sprite { + + constructor(textures: Texture[] | { texture: Texture, time?: number }[]); + + protected _textures: Texture[]; + protected _durations: number[]; + textures: Texture[] | { texture: Texture, time?: number }[]; + animationSpeed: number; + loop: boolean; + onComplete: () => void; + onFrameChange: (currentFrame: number) => void; + protected _currentTime: number; + playing: boolean; + totalFrames: number; + currentFrame: number; + stop(): void; + play(): void; + gotoAndStop(frameNumber: number): void; + gotoAndPlay(frameNumber: number): void; + protected update(deltaTime: number): void; + destroy(): void; + + static fromFrames(frame: string[]): AnimatedSprite; + static fromImages(images: string[]): AnimatedSprite; + + } + export class TextureTransform { + + constructor(texture: Texture, clampMargin?: number); + + protected _texture: Texture; + protected mapCoord: Matrix; + protected uClampFrame: Float32Array; + protected uClampOffset: Float32Array; + protected _lastTextureID: number; + + clampOffset: number; + clampMargin: number; + + texture: Texture; + + update(forceUpdate?: boolean): void; + + } + export class TilingSprite extends Sprite { + + constructor(texture: Texture, width?: number, height?: number); + + tileTransform: TransformStatic; + protected _width: number; + protected _height: number; + protected _canvasPattern: CanvasPattern; + uvTransform: TextureTransform; + + clampMargin: number; + tileScale: Point | ObservablePoint; + tilePosition: Point | ObservablePoint; + + protected _onTextureUpdate(): void; + protected _renderWebGL(renderer: WebGLRenderer): void; + protected _renderCanvas(renderer: CanvasRenderer): void; + protected _calculateBounds(): void; + getLocalBounds(rect?: Rectangle): Rectangle; + containsPoint(point: Point): boolean; + destroy(): void; + + static from(source: number | string | BaseTexture | HTMLCanvasElement | HTMLVideoElement, width?: number, height?: number): TilingSprite; + static fromFrame(frameId: string, width?: number, height?: number): TilingSprite; + // if you remove the next line, the class will break. https://github.com/pixijs/pixi-typescript/issues/96 + static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite; + static fromImage(imageId: string, width?: number, height?: number, crossorigin?: boolean, scaleMode?: number): TilingSprite; + + width: number; + height: number; + + } + export class TilingSpriteRenderer extends ObjectRenderer { + + constructor(renderer: WebGLRenderer); + + render(ts: TilingSprite): void; + + } + + } + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////FILTERS/////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module filters { + + export class FXAAFilter extends Filter { } + export class BlurFilter extends Filter { + + constructor(strength?: number, quality?: number, resolution?: number); + + blurXFilter: BlurXFilter; + blurYFilter: BlurYFilter; + resolution: number; + padding: number; + passes: number; + blur: number; + blurX: number; + blurY: number; + quality: number; + + } + export class BlurXFilter extends Filter { + + constructor(strength?: number, quality?: number, resolution?: number); + + protected _quality: number; + + quality: number; + passes: number; + resolution: number; + strength: number; + firstRun: boolean; + blur: number; + + } + export class BlurYFilter extends Filter { + + constructor(strength?: number, quality?: number, resolution?: number); + + protected _quality: number; + + quality: number; + passes: number; + resolution: number; + strength: number; + firstRun: boolean; + blur: number; + + } + export class ColorMatrixFilter extends Filter { + + constructor(); + + protected _loadMatrix(matrix: number[], multiply?: boolean): void; + protected _multiply(out: number[], a: number[], b: number[]): void; + protected _colorMatrix(matrix: number[]): void; + + matrix: number[]; + + brightness(b: number, multiply?: boolean): void; + greyscale(scale: number, multiply?: boolean): void; + blackAndWhite(multiply?: boolean): void; + hue(rotation: number, multiply?: boolean): void; + contrast(amount: number, multiply?: boolean): void; + saturate(amount: number, multiply?: boolean): void; + desaturate(multiply?: boolean): void; + negative(multiply?: boolean): void; + sepia(multiply?: boolean): void; + technicolor(multiply?: boolean): void; + polaroid(multiply?: boolean): void; + toBGR(multiply?: boolean): void; + kodachrome(multiply?: boolean): void; + browni(multiply?: boolean): void; + vintage(multiply?: boolean): void; + colorTone(desaturation: number, toned: number, lightColor: string, darkColor: string, multiply?: boolean): void; + night(intensity: number, multiply?: boolean): void; + predator(amount: number, multiply?: boolean): void; + lsd(multiply?: boolean): void; + reset(): void; + + } + export class DisplacementFilter extends Filter { + + constructor(sprite: Sprite, scale?: number); + + scale: Point; + map: Texture; + + } + export class VoidFilter extends Filter { + glShaderKey: string; + } + + // pixi-filters.d.ts todo + // https://github.com/pixijs/pixi-filters/ + export class NoiseFilter extends Filter { + + noise: number; + + } + + } + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////INTERACTION/////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module interaction { + + export interface InteractionEvent { + + stopped: boolean; + target: DisplayObject; + currentTarget: DisplayObject; + type: string; + data: InteractionData; + stopPropagation(): void; + + } + export class InteractionData { + + global: Point; + + protected _target: DisplayObject; + target: DisplayObject; + targetProxy: DisplayObject; + originalEvent: Event; + + getLocalPosition(displayObject: DisplayObject, point?: Point, globalPos?: Point): Point; + + } + export class InteractionManager extends utils.EventEmitter { + + constructor(renderer: SystemRenderer, options?: { autoPreventDefault?: boolean; interactionFrequency?: number; }); + + renderer: SystemRenderer; + autoPreventDefault: boolean; + interactionFrequency: number; + mouse: InteractionData; + pointer: InteractionData; + eventData: { + stopped: boolean; + target: any; + type: any; + data: InteractionData; + stopPropagination(): void; + }; + interactiveDataPool: InteractionData[]; + protected interactionDOMElement: HTMLElement; + protected moveWhenInside: boolean; + protected eventsAdded: boolean; + mouseOverRenderer: boolean; + supportsTouchEvents: boolean; + supportsPointerEvents: boolean; + normalizeTouchEvents: boolean; + normalizeMouseEvents: boolean; + + protected onMouseUp: (event: MouseEvent) => void; + protected processMouseUp: (displayObject: DisplayObject, hit: boolean) => void; + protected onMouseDown: (event: MouseEvent) => void; + protected processMouseDown: (displayObject: DisplayObject, hit: boolean) => void; + protected onMouseMove: (event: MouseEvent) => void; + protected processMouseMove: (displayObject: DisplayObject, hit: boolean) => void; + protected onMouseOut: (event: MouseEvent) => void; + protected processMouseOverOut: (displayObject: DisplayObject, hit: boolean) => void; + protected onMouseOver: (event: MouseEvent) => void; + + protected onPointerUp: (event: PointerEvent) => void; + protected processPointerUp: (displayObject: DisplayObject, hit: boolean) => void; + protected onPointerDown: (event: PointerEvent) => void; + protected processPointerDown: (displayObject: DisplayObject, hit: boolean) => void; + protected onPointerMove: (event: PointerEvent) => void; + protected processPointerMove: (displayObject: DisplayObject, hit: boolean) => void; + protected onPointerOut: (event: PointerEvent) => void; + protected processPointerOut: (displayObject: DisplayObject, hit: boolean) => void; + protected onPointerOver: (event: PointerEvent) => void; + + protected onTouchStart: (event: TouchEvent) => void; + protected processTouchStart: (DisplayObject: DisplayObject, hit: boolean) => void; + protected onTouchEnd: (event: TouchEvent) => void; + protected processTouchEnd: (displayObject: DisplayObject, hit: boolean) => void; + protected onTouchMove: (event: TouchEvent) => void; + protected processTouchMove: (displayObject: DisplayObject, hit: boolean) => void; + defaultCursorStyle: string; + currentCursorStyle: string; + protected _tempPoint: Point; + resolution: number; + protected setTargetElement(element: HTMLElement, resolution: number): void; + protected addEvents(): void; + protected removeEvents(): void; + update(deltaTime: number): void; + protected dispatchEvent(displayObject: DisplayObject, eventString: string, eventData: any): void; + mapPositionToPoint(point: Point, x: number, y: number): void; + protected processInteractive(point: Point, displayObject: DisplayObject, func: (displayObject: DisplayObject, hit: boolean) => void, hitTest: boolean, interactive: boolean): boolean; + protected _startInteractionProcess(): void; + protected _queueAdd(displayObject: DisplayObject, order: number): void; + protected _finishInteractionProcess(func: Function): void; + protected getTouchData(touchEvent: InteractionData): InteractionData; + protected returnTouchData(touchData: InteractionData): void; + protected normalizeToPointerData(Event: Event): void; + + destroy(): void; + + } + export interface InteractiveTarget { + + interactive: boolean; + interactiveChildren: boolean; + hitArea: IHitArea; + buttonMode: boolean; + defaultCursor: string; + + } + export interface InteractiveTargetProxy extends InteractiveTarget { + } + + } + + ////////////////////////////////////////////////////////////////////////////// + ///////////////////////////////LOADER///////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + // extends + // https://github.com/englercj/resource-loader/ + // 1.6.4 + + export module loaders { + + export interface ILoaderOptions { + + crossOrigin?: boolean | string; + loadType?: number; + xhrType?: string; + metaData?: any; + + } + export interface IResourceDictionary { + + [index: string]: PIXI.loaders.Resource; + + } + export class Loader extends utils.EventEmitter { + + protected static _pixiMiddleware: Function[]; + static addPixiMiddleware(fn: Function): void; + + constructor(baseUrl?: string, concurrency?: number); + + baseUrl: string; + progress: number; + loading: boolean; + resources: IResourceDictionary; + + add(name: string, url: string, options?: ILoaderOptions, cb?: () => void): Loader; + add(url: string, options?: ILoaderOptions, cb?: () => void): Loader; + // todo I am not sure of object literal notional (or its options) so just allowing any but would love to improve this + add(obj: any, options?: ILoaderOptions, cb?: () => void): Loader; + + on(event: "complete", fn: (loader: loaders.Loader, object: any) => void, context?: any): utils.EventEmitter; + on(event: "error", fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter; + on(event: "load", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter; + on(event: "progress", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter; + on(event: "start", fn: (loader: loaders.Loader) => void, context?: any): utils.EventEmitter; + on(event: string, fn: Function, context?: any): utils.EventEmitter; + + once(event: "complete", fn: (loader: loaders.Loader, object: any) => void, context?: any): utils.EventEmitter; + once(event: "error", fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter; + once(event: "load", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter; + once(event: "progress", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter; + once(event: "start", fn: (loader: loaders.Loader) => void, context?: any): utils.EventEmitter; + once(event: string, fn: Function, context?: any): utils.EventEmitter; + + before(fn: Function): Loader; + pre(fn: Function): Loader; + + after(fn: Function): Loader; + use(fn: Function): Loader; + + reset(): void; + + load(cb?: (loader: loaders.Loader, object: any) => void): Loader; + + } + export interface ITextureDictionary { + [index: string]: PIXI.Texture; + } + + export class Resource extends utils.EventEmitter { + + static LOAD_TYPE: { + XHR: number; + IMAGE: number; + AUDIO: number; + VIDEO: number; + }; + + static XHR_READ_STATE: { + UNSENT: number; + OPENED: number; + HEADERS_RECIEVED: number; + LOADING: number; + DONE: number; + }; + + static XHR_RESPONSE_TYPE: { + DEFAULT: number; + BUFFER: number; + BLOB: number; + DOCUMENT: number; + JSON: number; + TEXT: number; + }; + + constructor(name?: string, url?: string | string[], options?: ILoaderOptions); + + protected _loadSourceElement(type: string): void; + isLoading: boolean; + isComplete: boolean; + + isJson: boolean; + isXml: boolean; + isImage: boolean; + isAudio: boolean; + isVideo: boolean; + + name: string; + texture: Texture; + textures: ITextureDictionary; + url: string; + data: any; + crossOrigin: boolean | string; + loadType: number; + xhrType: string; + error: Error; + xhr: XMLHttpRequest; + SVGMetadataElement: any; + + metadata: any; + spineAtlas: any; + spineData: any; + + complete(): void; + load(cb?: () => void): void; + abort(message: string): void; + + } + } + + ////////////////////////////////////////////////////////////////////////////// + ///////////////////////////////MESH/////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module mesh { + + export class Mesh extends Container { + + constructor(texture: Texture, vertices?: Float32Array, uvs?: Float32Array, indices?: Uint16Array, drawMode?: number); + + protected _texture: Texture; + uvs: Float32Array; + vertices: Float32Array; + indices: Uint16Array; + dirty: number; + indexDirty: number; + dirtyVertex: boolean; + protected _geometryVersion: number; + blendMode: number; + canvasPadding: number; + drawMode: number; + texture: Texture; + shader: glCore.GLShader; + tintRgb: Float32Array; + protected _glDatas: { [n: number]: any; }; + protected _renderWebGL(renderer: WebGLRenderer): void; + protected _renderCanvas(renderer: CanvasRenderer): void; + protected _onTextureUpdate(): void; + protected _calculateBounds(): void; + containsPoint(point: Point): boolean; + tint: number; + + static DRAW_MODES: { + TRIANGLE_MESH: number; + TRIANGLES: number; + }; + + } + + export class CanvasMeshRenderer { + + constructor(renderer: CanvasRenderer); + + renderer: CanvasRenderer; + + render(mesh: Mesh): void; + protected _renderTriangleMesh(mesh: Mesh): void; + protected _renderTriangles(mesh: Mesh): void; + protected _renderDrawTriangle(mesh: Mesh, index0: number, index1: number, index2: number): void; + protected renderMeshFlat(mesh: Mesh): void; + + destroy(): void; + + } + + export class MeshRenderer extends ObjectRenderer { + + constructor(renderer: WebGLRenderer); + + shader: Shader; + render(mesh: Mesh): void; + + } + + export class Plane extends Mesh { + + constructor(texture: Texture, verticesX?: number, verticesY?: number); + protected _ready: boolean; + verticesX: number; + verticesY: number; + drawMode: number; + + refresh(): void; + + protected _onTexureUpdate(): void; + + } + + export class NineSlicePlane extends Plane { + + constructor(texture: Texture, leftWidth?: number, topHeight?: number, rightWidth?: number, bottomHeight?: number); + + width: number; + height: number; + leftWidth: number; + rightWidth: number; + topHeight: number; + bottomHeight: number; + + protected _leftWidth: number; + protected _rightWidth: number; + protected _topHeight: number; + protected _bottomHeight: number; + protected _height: number; + protected _width: number; + protected _origHeight: number; + protected _origWidth: number; + protected _uvh: number; + protected _uvw: number; + + updateHorizontalVertices(): void; + updateVerticalVertices(): void; + protected drawSegment(context: CanvasRenderingContext2D | WebGLRenderingContext, textureSource: any, w: number, h: number, x1: number, y1: number, x2: number, y2: number): void; + + } + + export class Rope extends Mesh { + + constructor(texture: Texture, points: Point[]); + + points: Point[]; + colors: number[]; + protected _ready: boolean; + refresh(): void; + + protected _onTextureUpdate(): void; + updateTransform(): void; + + } + } + + ////////////////////////////////////////////////////////////////////////////// + /////////////////////////////PARTICLES//////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module particles { + + export interface IParticleContainerProperties { + + scale?: boolean; + position?: boolean; + rotation?: boolean; + uvs?: boolean; + alpha?: boolean; + + } + export class ParticleContainer extends Container { + + constructor(size?: number, properties?: IParticleContainerProperties, batchSize?: number); + + protected _properties: boolean[]; + protected _maxSize: number; + protected _batchSize: number; + protected _glBuffers: { [n: number]: WebGLBuffer; }; + protected _bufferToUpdate: number; + interactiveChildren: boolean; + blendMode: number; + roundPixels: boolean; + baseTexture: BaseTexture; + + setProperties(properties: IParticleContainerProperties): void; + protected onChildrenChange: (smallestChildIndex?: number) => void; + + destroy(options?: IDestroyOptions | boolean): void; + + } + export class ParticleBuffer { + + constructor(gl: WebGLRenderingContext, properties: any, dynamicPropertyFlags: any[], size: number); + + gl: WebGLRenderingContext; + vertSize: number; + vertByteSize: number; + size: number; + dynamicProperties: any[]; + staticProperties: any[]; + staticStride: number; + staticBuffer: any; + staticData: any; + dynamicStride: number; + dynamicBuffer: any; + dynamicData: any; + + bind(): void; + destroy(): void; + + } + export interface IParticleRendererProperty { + attribute: number; + size: number; + uploadFunction: (children: PIXI.DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number) => void; + offset: number; + } + export class ParticleRenderer extends ObjectRenderer { + + constructor(renderer: WebGLRenderer); + + shader: glCore.GLShader; + indexBuffer: WebGLBuffer; + properties: IParticleRendererProperty[]; + protected tempMatrix: Matrix; + + start(): void; + generateBuffers(container: ParticleContainer): ParticleBuffer[]; + uploadVertices(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void; + uploadPosition(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void; + uploadRotation(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void; + uploadUvs(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void; + uploadAlpha(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void; + destroy(): void; + + indices: Uint16Array; + + } + export interface IParticleShader extends glCore.GLShader { } + + } + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////PREPARE/////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module prepare { + + interface addHook { + (item: any, queue: any[]): boolean; + } + interface uploadHook { + (prepare: UploadHookSource, item: any): boolean + } + export abstract class BasePrepare{ + + constructor(renderer: SystemRenderer); + + limiter: CountLimiter | TimeLimiter; + protected renderer: SystemRenderer; + protected uploadHookHelper: UploadHookSource; + protected queue: any[]; + protected addHooks: addHook[]; + protected uploadHooks: uploadHook[]; + protected completes: Function[]; + protected ticking: boolean; + protected delayedTick: () => void; + + upload(item: Function | DisplayObject | Container, done?: () => void): void; + protected tick(): void; + protected prepareItems(): void; + register(addHook?: addHook, uploadHook?: uploadHook): BasePrepare; + add(item: DisplayObject | Container | any): BasePrepare; + destroy(): void; + + } + export class CanvasPrepare extends BasePrepare { + + constructor(renderer: CanvasRenderer); + + protected canvas: HTMLCanvasElement; + protected ctx: CanvasRenderingContext2D; + + } + export class WebGLPrepare extends BasePrepare { + + constructor(renderer: WebGLRenderer); + + } + export class CountLimiter { + + constructor(maxItemsPerFrame: number); + + protected maxItemsPerFrame: number; + protected itemsLeft: number; + + } + export class TimeLimiter { + + constructor(maxMilliseconds: number); + + protected maxMilliseconds: number; + protected frameStart: number; + + } + + } + + ////////////////////////////////////////////////////////////////////////////// + /////////////////////////////pixi-gl-core///////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + // pixi-gl-core https://github.com/pixijs/pixi-gl-core + // sharedArrayBuffer as a type is not available yet. + // need to fully define what an `Attrib` is. + export module glCore { + + export interface IContextOptions { + /** + * Boolean that indicates if the canvas contains an alpha buffer. + */ + alpha?: boolean; + /** + * Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits. + */ + depth?: boolean; + /** + * Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits. + */ + stencil?: boolean; + /** + * Boolean that indicates whether or not to perform anti-aliasing. + */ + antialias?: boolean; + /** + * Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha. + */ + premultipliedAlpha?: boolean; + /** + * If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author. + */ + preserveDrawingBuffer?: boolean; + /** + * Boolean that indicates if a context will be created if the system performance is low. + */ + failIfMajorPerformanceCaveat?: boolean; + } + export function createContext(view: HTMLCanvasElement, options?: IContextOptions): WebGLRenderingContext; + export function setVertexAttribArrays(gl: WebGLRenderingContext, attribs: IAttrib[], state?: WebGLState): WebGLRenderingContext; + export class GLBuffer { + + static EMPTY_ARRAY_BUFFER: ArrayBuffer; + + constructor(gl: WebGLRenderingContext, type: number, data: ArrayBuffer | ArrayBufferView | any, drawType: number); + + protected _updateID: number; + gl: WebGLRenderingContext; + buffer: WebGLBuffer; + type: number; + drawType: number; + data: ArrayBuffer | ArrayBufferView | any; + + upload(data: ArrayBuffer | ArrayBufferView | any, offset: number, dontBind: boolean): void; + bind(): void; + + static createVertexBuffer(gl: WebGLRenderingContext, data: ArrayBuffer | ArrayBufferView | any, drawType: number): WebGLBuffer; + static createIndexBuffer(gl: WebGLRenderingContext, data: ArrayBuffer | ArrayBufferView | any, drawType: number): WebGLBuffer; + static create(gl: WebGLRenderingContext, type: number, data: ArrayBuffer | ArrayBufferView | any, drawType: number): WebGLBuffer; + + destroy(): void; + + } + export class GLFramebuffer { + + constructor(gl: WebGLRenderingContext, width: number, height: number); + + gl: WebGLRenderingContext; + frameBuffer: WebGLFramebuffer; + stencil: WebGLRenderbuffer; + texture: GLTexture; + width: number; + height: number; + + enableTexture(texture: GLTexture): void; + enableStencil(): void; + clear(r: number, g: number, b: number, a: number): void; + bind(): void; + unbind(): void; + resize(width: number, height: number): void; + destroy(): void; + + static createRGBA(gl: WebGLRenderingContext, width: number, height: number, data: ArrayBuffer | ArrayBufferView | any): GLFramebuffer; + static createFloat32(gl: WebGLRenderingContext, width: number, height: number, data: ArrayBuffer | ArrayBufferView | any): GLFramebuffer; + + } + export class GLShader { + + constructor(gl: WebGLRenderingContext, vertexSrc: string | string[], fragmentSrc: string | string[]); + + gl: WebGLRenderingContext; + program: WebGLProgram; + uniforms: any; + + bind(): void; + destroy(): void; + + } + export class GLTexture { + + constructor(gl: WebGLRenderingContext, width: number, height: number, format: number, type: number); + + gl: WebGLRenderingContext; + texture: WebGLTexture; + mipmap: boolean; + premultiplyAlpha: boolean; + width: number; + height: number; + format: number; + type: number; + + upload(source: HTMLImageElement | ImageData | HTMLVideoElement): void; + uploadData(data: number, width: number, height: number): void; + bind(): void; + unbind(): void; + minFilter(linear: boolean): void; + magFilter(linear: boolean): void; + enableMipmap(): void; + enableLinearScaling(): void; + enableNearestScaling(): void; + enableWrapClamp(): void; + enableWrapRepeat(): void; + enableWrapMirrorRepeat(): void; + destroy(): void; + + static fromSource(gl: WebGLRenderingContext, source: HTMLImageElement | ImageData | HTMLVideoElement, premultipleAlpha?: boolean): GLTexture; + static fromData(gl: WebGLRenderingContext, data: number[], width: number, height: number): GLTexture; + + } + export interface IAttrib { + + attribute: { + location: boolean; + size: number; + }; + normalized: boolean; + stride: number; + start: number; + buffer: ArrayBuffer; + + } + export interface IWebGLRenderingContextAttribute { + + buffer: WebGLBuffer; + attribute: any; + type: number; + normalized: boolean; + stride: number; + start: number; + + } + export interface IAttribState { + tempAttribState: IAttrib[]; + attribState: IAttrib[]; + } + + export class VertexArrayObject { + + static FORCE_NATIVE: boolean; + + constructor(gl: WebGLRenderingContext, state: WebGLState); + + protected nativeVaoExtension: any; + protected nativeState: IAttribState; + protected nativeVao: VertexArrayObject; + gl: WebGLRenderingContext; + attributes: IAttrib[]; + indexBuffer: GLBuffer; + dirty: boolean; + + bind(): VertexArrayObject; + unbind(): VertexArrayObject; + activate(): VertexArrayObject; + addAttribute(buffer: GLBuffer, attribute: IAttrib, type: number, normalized: boolean, stride: number, start: number): VertexArrayObject; + addIndex(buffer: GLBuffer, options?: any): VertexArrayObject; + clear(): VertexArrayObject; + draw(type: number, size: number, start: number): VertexArrayObject; + destroy(): void; + + } + + } + + ////////////////////////////////////////////////////////////////////////////// + ///////////////////////////////UTILS////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export interface IDecomposedDataUri { + mediaType: string; + subType: string; + encoding: string; + data: any; + } + + export module utils { + + export function uid(): number; + export function hex2rgb(hex: number, out?: number[]): number[]; + export function hex2string(hex: number): string; + export function rgb2hex(rgb: Number[]): number; + export function canUseNewCanvasBlendModes(): boolean; + export function getResolutionOfUrl(url: string): number; + export function getSvgSize(svgString: string): any; + export function decomposeDataUri(dataUri: string): IDecomposedDataUri; + export function getUrlFileExtension(url: string): string; + export function sayHello(type: string): void; + export function skipHello(): void; + export function isWebGLSupported(): boolean; + export function sign(n: number): number; + export function removeItems(arr: T[], startIdx: number, removeCount: number): void; + export var TextureCache: any; + export var BaseTextureCache: any; + + //https://github.com/kaimallea/isMobile + export module isMobile { + export var apple: { + phone: boolean; + ipod: boolean; + tablet: boolean; + device: boolean; + }; + export var android: { + phone: boolean; + tablet: boolean; + device: boolean; + } + export var amazon: { + phone: boolean; + table: boolean; + device: boolean; + } + export var windows: { + phone: boolean; + tablet: boolean; + device: boolean; + } + export var seven_inch: boolean; + export var other: { + blackberry_10: boolean; + blackberry: boolean; + opera: boolean; + firefox: boolean; + chrome: boolean; + device: boolean; + } + export var any: boolean; + export var phone: boolean; + export var tablet: boolean; + } + + // https://github.com/primus/eventemitter3 + export class EventEmitter { + + listeners(event: string): Function[]; + emit(event: string, ...args: any[]): boolean; + on(event: string, fn: Function, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + removeListener(event: string, fn: Function, context?: any, once?: boolean): EventEmitter; + removeAllListeners(event: string): EventEmitter; + eventNames(): string[]; + + off(event: string, fn: Function, context?: any, once?: boolean): EventEmitter; + addListener(event: string, fn: Function, context?: any): EventEmitter; + + } + + } + +} + +declare module pixi { + export var gl: typeof PIXI.glCore; +} + +declare module "pixi.js" { + export = PIXI; +} diff --git a/pixi.js/pixi.js-tests.ts b/pixi.js/pixi.js-tests.ts index 329560d6f7..44f663af9a 100644 --- a/pixi.js/pixi.js-tests.ts +++ b/pixi.js/pixi.js-tests.ts @@ -209,7 +209,7 @@ namespace basics { private animate = (): void => { - this.filter.uniforms.customUniform.value += 0.04; + this.filter.uniforms['customUniform'].value += 0.04; this.renderer.render(this.stage); requestAnimationFrame(this.animate); @@ -218,9 +218,9 @@ namespace basics { } - export class CustomizedFilter extends PIXI.AbstractFilter { + export class CustomizedFilter extends PIXI.Filter { - constructor(fragmentSource: string | string[]) { + constructor(fragmentSource: string) { super(null, fragmentSource, { customUniform: { type: '1f', @@ -337,7 +337,7 @@ namespace basics { }; - this.renderTexture = new PIXI.RenderTexture(this.renderer, 300, 200, PIXI.SCALE_MODES.LINEAR, 0.1); + this.renderTexture = PIXI.RenderTexture.create(300, 200, PIXI.SCALE_MODES.LINEAR, 0.1); this.sprite = new PIXI.Sprite(this.renderTexture); this.sprite.x = 450; @@ -354,7 +354,7 @@ namespace basics { private animate = (): void => { - this.renderTexture.render(this.container); + this.renderer.render(this.container, this.renderTexture) requestAnimationFrame(this.animate); @@ -374,7 +374,7 @@ namespace basics { private stage: PIXI.Container; - private movie: PIXI.extras.MovieClip; + private movie: PIXI.extras.AnimatedSprite; constructor() { @@ -398,11 +398,11 @@ namespace basics { } - // create a MovieClip (brings back memories from the days of Flash, right ?) - this.movie = new PIXI.extras.MovieClip(frames); + // create a AnimatedSprite (brings back memories from the days of Flash, right ?) + this.movie = new PIXI.extras.AnimatedSprite(frames); /* - * A MovieClip inherits all the properties of a PIXI sprite + * A AnimatedSprite inherits all the properties of a PIXI sprite * so you can change its position, its anchor, mask it, etc */ this.movie.position.set(300); @@ -460,8 +460,11 @@ namespace basics { this.stage.addChild(this.basicText); var style: PIXI.TextStyle = { - font: '36px Arial bold italic', - fill: PIXI.utils.hex2string(0xF7EDCA), + fontSize: 36, + fontFamily: 'Arial', + fontWeight: 'bold', + fontStyle: 'italic', + fill: '#F7EDCA', stroke: '#4a1850', strokeThickness: 5, dropShadow: true, @@ -783,7 +786,7 @@ namespace demos { private stage: PIXI.Container; - private sprites: PIXI.ParticleContainer; + private sprites: PIXI.particles.ParticleContainer; private maggots: BatchDude[]; @@ -799,7 +802,7 @@ namespace demos { // create the root of the scene graph this.stage = new PIXI.Container(); - this.sprites = new PIXI.ParticleContainer(10000, { + this.sprites = new PIXI.particles.ParticleContainer(10000, { scale: true, position: true, @@ -1706,7 +1709,7 @@ namespace demos { this.stage.on('click', this.onClick); this.stage.on('tap', this.onClick); - this.help = new PIXI.Text('Click to turn masking on / off.', { font: 'bold 12pt Arial', fill: 'white' }); + this.help = new PIXI.Text('Click to turn masking on / off.', { fontFamily: 'Arial', fontSize: 12, fontWeight: 'bold', fill: 'white' }); this.help.position.y = this.renderer.height - 26; this.help.position.x = 10; this.stage.addChild(this.help); @@ -1763,7 +1766,7 @@ namespace demos { namespace demos { - export class MovieClipDemo { + export class AnimatedSpriteDemo { private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; @@ -1801,8 +1804,8 @@ namespace demos { for (i = 0; i < 50; i++) { - // create an explosion MovieClip - var explosion = new PIXI.extras.MovieClip(explosionTextures); + // create an explosion AnimatedSprite + var explosion = new PIXI.extras.AnimatedSprite(explosionTextures); explosion.position.x = Math.random() * 800; explosion.position.y = Math.random() * 600; @@ -1862,8 +1865,8 @@ namespace demos { this.stage = new PIXI.Container(); // create two render textures... these dynamic textures will be used to draw the scene into itself - this.renderTexture = new PIXI.RenderTexture(this.renderer, this.renderer.width, this.renderer.height); - this.renderTexture2 = new PIXI.RenderTexture(this.renderer, this.renderer.width, this.renderer.height); + this.renderTexture = PIXI.RenderTexture.create(this.renderer.width, this.renderer.height); + this.renderTexture2 = PIXI.RenderTexture.create(this.renderer.width, this.renderer.height); this.currentTexture = this.renderTexture; // create a new sprite that uses the render texture we created above @@ -1946,7 +1949,7 @@ namespace demos { // render the stage to the texture // the 'true' clears the texture before the content is rendered - this.renderTexture2.render(this.stage, null, false); + this.renderer.render(this.stage, this.renderTexture2, false); // and finally render the stage this.renderer.render(this.stage); @@ -2087,11 +2090,11 @@ namespace demos { this.stage.addChild(this.background); // create some white text using the Snippet webfont - this.textSample = new PIXI.Text('Pixi.js can has\n multiline text!', { font: '35px Snippet', fill: 'white', align: 'left' }); + this.textSample = new PIXI.Text('Pixi.js can has\n multiline text!', { fontSize: 35, fontFamily: 'Snippet', fill: 'white', align: 'left' }); this.textSample.position.set(20); // create a text object with a nice stroke - this.spinningText = new PIXI.Text('I\'m fun!', { font: 'bold 60px Arial', fill: '#cc00ff', align: 'center', stroke: '#FFFFFF', strokeThickness: 6 }); + this.spinningText = new PIXI.Text('I\'m fun!', { fontWeight: 'bold', fontSize: 60, fontFamily: 'Arial', fill: '#cc00ff', align: 'center', stroke: '#FFFFFF', strokeThickness: 6 }); // setting the anchor point to 0.5 will center align the text... great for spinning! this.spinningText.anchor.set(0.5); @@ -2099,7 +2102,7 @@ namespace demos { this.spinningText.position.y = 200; // create a text object that will be updated... - this.countingText = new PIXI.Text('COUNT 4EVAR: 0', { font: 'bold italic 60px Arvo', fill: '#3e1707', align: 'center', stroke: '#a4410e', strokeThickness: 7 }); + this.countingText = new PIXI.Text('COUNT 4EVAR: 0', { fontWeight: 'bold', fontStyle: 'italic', fontSize: 60, fontFamily: 'Arvo', fill: '#3e1707', align: 'center', stroke: '#a4410e', strokeThickness: 7 }); this.countingText.position.x = 310; this.countingText.position.y = 320; @@ -2704,7 +2707,7 @@ namespace filters { this.stage.on('tap', this.onClick); - this.help = new PIXI.Text('Click to turn filters on / off.', { font: 'bold 12pt Arial', fill: 'white' }); + this.help = new PIXI.Text('Click to turn filters on / off.', { fontWeight: 'bold', fontSize: 12, fontFamily: 'Arial', fill: 'white' }); this.help.position.y = this.renderer.height - 25; this.help.position.x = 10; diff --git a/pixi.js/v3/pixi.js-tests.ts b/pixi.js/v3/pixi.js-tests.ts new file mode 100644 index 0000000000..f54da3fb00 --- /dev/null +++ b/pixi.js/v3/pixi.js-tests.ts @@ -0,0 +1,2761 @@ +/// +namespace basics { + + export class Basics { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private bunny: PIXI.Sprite; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // create a texture from an image path + var texture: PIXI.Texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png"); + + // create a new Sprite using the texture + this.bunny = new PIXI.Sprite(texture); + + // center the sprite's anchor point + this.bunny.anchor.x = 0.5; + this.bunny.anchor.y = 0.5; + + // move the sprite to the center of the screen + this.bunny.position.x = 200; + this.bunny.position.y = 150; + + //add it to the stage + this.stage.addChild(this.bunny); + + this.animate(); + + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.bunny.rotation += 0.1; + + this.renderer.render(this.stage); + + } + + } + +} + +namespace basics { + + export class Click { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private sprite: PIXI.Sprite; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png'); + this.sprite.position.set(230, 264); + this.sprite.interactive = true; + this.sprite.on('mousedown', this.onDown, this); + this.sprite.on('touchstart', this.onDown, this); + + //add it to the stage + this.stage.addChild(this.sprite); + + //start animatng + this.animate(); + + } + + private onDown = (eventData: PIXI.interaction.InteractionData): void => { + + this.sprite.scale.x += 0.3; + this.sprite.scale.y += 0.3; + + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + +} + +namespace basics { + + export class Container { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private container: PIXI.Container; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.container = new PIXI.Container(); + + this.stage.addChild(this.container); + + for (var j = 0; j < 5; j++) { + + for (var i = 0; i < 5; i++) { + + var bunny: PIXI.Sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png'); + bunny.x = 40 * i; + bunny.y = 40 * j; + this.container.addChild(bunny); + + }; + + }; + + /* + * All the bunnies are added to the container with the addChild method + * when you do this, all the bunnies become children of the container, and when a container moves, + * so do all its children. + * This gives you a lot of flexibility and makes it easier to position elements on the screen + */ + this.container.x = 100; + this.container.y = 60; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + +} + +namespace basics { + + export class CustomFilter { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private background: PIXI.Sprite; + + private filter: CustomizedFilter; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.background = PIXI.Sprite.fromImage('../../_assets/bkg-grass.jpg'); + this.background.scale.set(1.3, 1); + this.stage.addChild(this.background); + + + PIXI.loader.add('shader', '../../_assets/basics/shader.frag'); + PIXI.loader.once('complete', this.onLoaded, this); + PIXI.loader.load(); + + } + + private onLoaded(loader: PIXI.loaders.Loader, res: any) { + + var fragmentSrc = res.shader.data; + + this.filter = new CustomizedFilter(fragmentSrc); + this.background.filters = [this.filter]; + + this.animate(); + + + } + + private animate = (): void => { + + this.filter.uniforms.customUniform.value += 0.04; + + this.renderer.render(this.stage); + requestAnimationFrame(this.animate); + + } + + } + + export class CustomizedFilter extends PIXI.AbstractFilter { + + constructor(fragmentSource: string | string[]) { + super(null, fragmentSource, { + customUniform: { + type: '1f', + value: 0 + } + }) + } + + } + +} + +namespace basics { + + export class Graphics { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private graphics: PIXI.Graphics; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; + + this.graphics = new PIXI.Graphics(); + + // draw a shape + this.graphics.moveTo(50, 50); + this.graphics.lineTo(250, 50); + this.graphics.lineTo(100, 100); + this.graphics.lineTo(50, 50); + this.graphics.endFill(); + + // set a fill and a line style again and draw a rectangle + this.graphics.lineStyle(2, 0x0000FF, 1); + this.graphics.beginFill(0xFF700B, 1); + this.graphics.drawRect(50, 250, 120, 120); + + // draw a rounded rectangle + this.graphics.lineStyle(2, 0xFF00FF, 1); + this.graphics.beginFill(0xFF00BB, 0.25); + this.graphics.drawRoundedRect(150, 450, 300, 100, 15); + this.graphics.endFill(); + + // draw a circle, set the lineStyle to zero so the circle doesn't have an outline + this.graphics.lineStyle(0); + this.graphics.beginFill(0xFFFF0B, 0.5); + this.graphics.drawCircle(470, 90, 60); + this.graphics.endFill(); + + this.stage.addChild(this.graphics); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + +} + +namespace basics { + + export class RenderTexture { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private container: PIXI.Container; + + private renderTexture: PIXI.RenderTexture; + + private sprite: PIXI.Sprite; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.container = new PIXI.Container(); + + this.stage.addChild(this.container); + + for (var j = 0; j < 5; j++) { + + for (var i = 0; i < 5; i++) { + + var bunny: PIXI.Sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png'); + bunny.x = 40 * i; + bunny.y = 40 * j; + bunny.rotation = Math.random() * (Math.PI * 2); + this.container.addChild(bunny); + + }; + + }; + + this.renderTexture = new PIXI.RenderTexture(this.renderer, 300, 200, PIXI.SCALE_MODES.LINEAR, 0.1); + + this.sprite = new PIXI.Sprite(this.renderTexture); + this.sprite.x = 450; + this.sprite.y = 60; + this.stage.addChild(this.sprite); + + this.container.x = 100; + this.container.y = 60; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + this.renderTexture.render(this.container); + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + +} + +namespace basics { + + export class SpriteSheet { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private movie: PIXI.extras.MovieClip; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + PIXI.loader.add('../../_assets/basics/fighter.json').load((loader: PIXI.loaders.Loader, object: any): void => { + + // create an array of textures from an image path + var frames: PIXI.Texture[] = []; + + for (var i = 0; i < 30; i++) { + + var val = i < 10 ? '0' + i : i; + + // magically works since the spritesheet was loaded with the pixi loader + frames.push(PIXI.Texture.fromFrame('rollSequence00' + val + '.png')); + } + + + // create a MovieClip (brings back memories from the days of Flash, right ?) + this.movie = new PIXI.extras.MovieClip(frames); + + /* + * A MovieClip inherits all the properties of a PIXI sprite + * so you can change its position, its anchor, mask it, etc + */ + this.movie.position.set(300); + this.movie.anchor.set(0.5); + this.movie.animationSpeed = 0.5; + this.movie.play(); + + this.stage.addChild(this.movie); + + this.animate(); + + }); + + } + + private animate = (): void => { + + this.movie.rotation += 0.01; + + //render the stage container + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +namespace basics { + + export class Text { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private basicText: PIXI.Text; + + private richText: PIXI.Text; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.basicText = new PIXI.Text('Basic Text in Pixi'); + this.basicText.x = 30; + this.basicText.y = 90; + + this.stage.addChild(this.basicText); + + var style: PIXI.TextStyle = { + font: '36px Arial bold italic', + fill: PIXI.utils.hex2string(0xF7EDCA), + stroke: '#4a1850', + strokeThickness: 5, + dropShadow: true, + dropShadowColor: '#000000', + dropShadowAngle: Math.PI / 6, + dropShadowDistance: 6, + wordWrap: true, + wordWrapWidth: 440 + }; + + this.richText = new PIXI.Text('Rich Text with a lot of options and across multiple lines', style); + this.richText.x = 30; + this.richText.y = 180; + + this.stage.addChild(this.richText); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + +} + +namespace basics { + + export class TexturedMesh { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private strip: PIXI.mesh.Rope; + + private graphics: PIXI.Graphics; + + private count: number; + + private points: PIXI.Point[]; + + private ropeLength: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.count = 0; + + this.ropeLength = 918 / 20; + this.ropeLength = 45; + + this.points = []; + + for (var i = 0; i < 25; i++) { + this.points.push(new PIXI.Point(i * this.ropeLength, 0)); + }; + + this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('../../_assets/snake.png'), this.points); + this.strip.position.x = -40; + this.strip.position.y = 300; + this.stage.addChild(this.strip); + + this.graphics = new PIXI.Graphics(); + this.graphics.x = this.strip.x; + this.graphics.y = this.strip.y; + this.stage.addChild(this.graphics); + + //start animating + this.animate(); + + } + + private animate = (): void => { + + this.count += 0.1; + + //make the snake + for (var i = 0; i < this.points.length; i++) { + + this.points[i].y = Math.sin((i * 0.5) + this.count) * 30; + + this.points[i].x = i * this.ropeLength + Math.cos((i * 0.3) + this.count) * 20; + + }; + + //render the stage + this.renderer.render(this.stage); + + this.renderPoints(); + + requestAnimationFrame(this.animate); + + } + + private renderPoints(): void { + + this.graphics.clear(); + + this.graphics.lineStyle(2, 0xffc2c2); + this.graphics.moveTo(this.points[0].x, this.points[0].y); + + for (var i = 1; i < this.points.length; i++) { + this.graphics.lineTo(this.points[i].x, this.points[i].y); + }; + + for (var i = 1; i < this.points.length; i++) { + this.graphics.beginFill(0xff0022); + this.graphics.drawCircle(this.points[i].x, this.points[i].y, 10); + this.graphics.endFill(); + }; + + } + + } + +} + +namespace basics { + + export class TilingSprite { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private texture: PIXI.Texture; + + private tilingSprite: PIXI.extras.TilingSprite; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + //create a texture from an image path + this.texture = PIXI.Texture.fromImage('../../_assets/p2.jpeg'); + + /* create a tiling sprite ... + * requires a texture, a width and a height + * in WebGL the image size should preferably be a power of two + */ + this.tilingSprite = new PIXI.extras.TilingSprite(this.texture, this.renderer.width, this.renderer.height); + this.stage.addChild(this.tilingSprite); + + this.count = 0; + + this.animate(); + + } + + private animate = (): void => { + + this.count += 0.005; + + this.tilingSprite.tileScale.x = 2 + Math.sin(this.count); + this.tilingSprite.tileScale.y = 2 + Math.cos(this.count); + + this.tilingSprite.tilePosition.x += 1; + this.tilingSprite.tilePosition.y += 1; + + // render the root container + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +namespace basics { + + export class Video { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private texture: PIXI.Texture; + + private videoSprite: PIXI.Sprite; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + //create a video texture from a path + this.texture = PIXI.Texture.fromVideo('../../_assets/testVideo.mp4'); + + //create a new sprite using the video texture (yes it's that easy) + this.videoSprite = new PIXI.Sprite(this.texture); + this.videoSprite.width = this.renderer.width; + this.videoSprite.height = this.renderer.height; + this.stage.addChild(this.videoSprite); + + this.stage.addChild(this.videoSprite); + + this.animate(); + + } + + private animate = (): void => { + + //render the stage + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +namespace demos { + + export class AlphaMask { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private background: PIXI.Container; + + private cells: PIXI.Sprite; + + private mask: PIXI.Sprite; + + private target: PIXI.Point; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; + + this.background = PIXI.Sprite.fromImage('../../_assets/bkg.jpg'); + this.stage.addChild(this.background); + + this.cells = PIXI.Sprite.fromImage('../../_assets/cells.png'); + this.cells.scale.set(1.5, 1.5); + + this.mask = PIXI.Sprite.fromImage('../../_assets/flowerTop.png'); + this.mask.anchor.set(0.5); + this.mask.position.x = 310; + this.mask.position.y = 190; + + this.cells.mask = this.mask; + + this.stage.addChild(this.mask); + + this.stage.addChild(this.cells); + + this.target = new PIXI.Point(); + + this.reset(); + + this.animate(); + + } + + private reset(): void { + + this.target.x = Math.floor(Math.random() * 550); + this.target.y = Math.floor(Math.random() * 300); + + } + + private animate = (): void => { + + this.mask.position.x += (this.target.x - this.mask.x) * 0.1; + this.mask.position.y += (this.target.y - this.mask.y) * 0.1; + + if (Math.abs(this.mask.x - this.target.x) < 1) { + this.reset(); + } + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +namespace demos { + + export class Batch { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private sprites: PIXI.ParticleContainer; + + private maggots: BatchDude[]; + + private tick: number; + + private dudeBounds: PIXI.Rectangle; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.sprites = new PIXI.ParticleContainer(10000, { + + scale: true, + position: true, + rotation: true, + uvs: true, + alpha: true + + }); + this.stage.addChild(this.sprites); + + // create an array to store all the sprites + this.maggots = []; + + var totalSprites = this.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + + for (var i = 0; i < totalSprites; i++) { + + // create a new Sprite + var dude = new BatchDude(PIXI.Texture.fromImage('../../_assets/tinyMaggot.png')); + + dude.tint = Math.random() * 0xE8D4CD; + + // set the anchor point so the texture is centerd on the sprite + dude.anchor.set(0.5); + + // different maggots, different sizes + dude.scale.set(0.8 + Math.random() * 0.3); + + // scatter them all + dude.x = Math.random() * this.renderer.width; + dude.y = Math.random() * this.renderer.height; + + dude.tint = Math.random() * 0x808080; + + // create a random direction in radians + dude.direction = Math.random() * Math.PI * 2; + + // this number will be used to modify the direction of the sprite over time + dude.turningSpeed = Math.random() - 0.8; + + // create a random speed between 0 - 2, and these maggots are slooww + dude.speed = (2 + Math.random() * 2) * 0.2; + + dude.offset = Math.random() * 100; + + // finally we push the dude into the maggots array so it it can be easily accessed later + this.maggots.push(dude); + + this.sprites.addChild(dude); + + } + + // create a bounding box box for the little maggots + var dudeBoundsPadding = 100; + this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding, + -dudeBoundsPadding, + this.renderer.width + dudeBoundsPadding * 2, + this.renderer.height + dudeBoundsPadding * 2); + + this.tick = 0; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // iterate through the sprites and update their position + for (var i = 0; i < this.maggots.length; i++) { + + var dude = this.maggots[i]; + dude.scale.y = 0.95 + Math.sin(this.tick + dude.offset) * 0.05; + dude.direction += dude.turningSpeed * 0.01; + dude.position.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y); + dude.position.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y); + dude.rotation = -dude.direction + Math.PI; + + // wrap the maggots + if (dude.position.x < this.dudeBounds.x) { + dude.position.x += this.dudeBounds.width; + } + else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) { + dude.position.x -= this.dudeBounds.width; + } + + if (dude.position.y < this.dudeBounds.y) { + dude.position.y += this.dudeBounds.height; + } + else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) { + dude.position.y -= this.dudeBounds.height; + } + } + + // increment the ticker + this.tick += 0.1; + + // time to render the stage ! + this.renderer.render(this.stage); + + // request another animation frame... + requestAnimationFrame(this.animate); + + } + + } + + export class BatchDude extends PIXI.Sprite { + + direction: number; + speed: number; + turningSpeed: number; + offset: number; + + constructor(texture: PIXI.Texture) { + + super(texture); + + } + + } + +} + +namespace demos { + + export class BlendModes { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private background: PIXI.Sprite; + + private dudeArray: BlendModesDude[]; + + private totalDudes: number; + + private dudeBounds: PIXI.Rectangle; + + private tick: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // create a new background sprite + this.background = PIXI.Sprite.fromImage('../../_assets/BGrotate.jpg'); + this.stage.addChild(this.background); + + // create an array to store a reference to the dudes + this.dudeArray = []; + + this.totalDudes = 20; + + for (var i = 0; i < this.totalDudes; i++) { + + // create a new Sprite that uses the image name that we just generated as its source + var dude = new BlendModesDude(PIXI.Texture.fromImage('../../_assets/flowerTop.png')); + + dude.anchor.set(0.5); + + // set a random scale for the dude + dude.scale.set(0.8 + Math.random() * 0.3); + + // finally let's set the dude to be at a random position... + dude.position.x = Math.floor(Math.random() * this.renderer.width); + dude.position.y = Math.floor(Math.random() * this.renderer.height); + + // The important bit of this example, this is how you change the default blend mode of the sprite + dude.blendMode = PIXI.BLEND_MODES.ADD; + + // create some extra properties that will control movement + dude.direction = Math.random() * Math.PI * 2; + + // this number will be used to modify the direction of the dude over time + dude.turningSpeed = Math.random() - 0.8; + + // create a random speed for the dude between 0 - 2 + dude.speed = 2 + Math.random() * 2; + + // finally we push the dude into the dudeArray so it it can be easily accessed later + this.dudeArray.push(dude); + + this.stage.addChild(dude); + + } + + // create a bounding box box for the little maggots + var dudeBoundsPadding = 100; + this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding, + -dudeBoundsPadding, + this.renderer.width + dudeBoundsPadding * 2, + this.renderer.height + dudeBoundsPadding * 2); + + this.tick = 0; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // iterate through the dudes and update the positions + for (var i = 0; i < this.dudeArray.length; i++) { + + var dude = this.dudeArray[i]; + dude.direction += dude.turningSpeed * 0.01; + dude.position.x += Math.sin(dude.direction) * dude.speed; + dude.position.y += Math.cos(dude.direction) * dude.speed; + dude.rotation = -dude.direction - Math.PI / 2; + + // wrap the dudes by testing their bounds... + if (dude.position.x < this.dudeBounds.x) { + dude.position.x += this.dudeBounds.width; + } + else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) { + dude.position.x -= this.dudeBounds.width; + } + + if (dude.position.y < this.dudeBounds.y) { + dude.position.y += this.dudeBounds.height; + } + else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) { + dude.position.y -= this.dudeBounds.height; + } + } + + // increment the ticker + this.tick += 0.1; + + // time to render the stage ! + this.renderer.render(this.stage); + + // request another animation frame... + requestAnimationFrame(this.animate); + + } + + } + + export class BlendModesDude extends PIXI.Sprite { + + direction: number; + speed: number; + turningSpeed: number; + offset: number; + + constructor(texture: PIXI.Texture) { + + super(texture); + + } + + } + +} + +namespace demos { + + export class CacheAsBitmap { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private aliens: PIXI.Sprite[]; + + private alienContainer: PIXI.Container; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // load resources + PIXI.loader + .add('spritesheet', '../../_assets/monsters.json') + .load(this.onAssetsLoaded); + + // holder to store aliens + this.aliens = []; + + this.count = 0; + + // create an empty container + this.alienContainer = new PIXI.Container(); + this.alienContainer.position.x = 400; + this.alienContainer.position.y = 300; + + // make the stage interactive + this.stage.interactive = true; + + this.stage.addChild(this.alienContainer); + + this.stage.on('click', this.onClick); + this.stage.on('tap', this.onClick); + + } + + private onClick = (event: PIXI.interaction.InteractionEvent): void => { + + this.alienContainer.cacheAsBitmap = !this.alienContainer.cacheAsBitmap; + + //feel free to play with what's below + //var sprite = new PIXI.Sprite(this.alienContainer.generateTexture()); + //this.stage.addChild(sprite); + //sprite.position.x = Math.random() * 800; + //sprite.position.y = Math.random() * 600; + + } + + private onAssetsLoaded = (): void => { + + // add a bunch of aliens with textures from image paths + + var alienFrames = ['eggHead.png', 'flowerTop.png', 'helmlok.png', 'skully.png']; + + for (var i = 0; i < 100; i++) { + + var frameName = alienFrames[i % 4]; + + // create an alien using the frame name.. + var alien = PIXI.Sprite.fromFrame(frameName); + alien.tint = Math.random() * 0xFFFFFF; + + /* + * fun fact for the day :) + * another way of doing the above would be + * var texture = PIXI.Texture.fromFrame(frameName); + * var alien = new PIXI.Sprite(texture); + */ + alien.position.x = Math.random() * 800 - 400; + alien.position.y = Math.random() * 600 - 300; + alien.anchor.x = 0.5; + alien.anchor.y = 0.5; + this.aliens.push(alien); + this.alienContainer.addChild(alien); + + } + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // let's rotate the aliens a little bit + for (var i = 0; i < 100; i++) { + var alien = this.aliens[i]; + alien.rotation += 0.1; + } + + this.count += 0.01; + + this.alienContainer.scale.x = Math.sin(this.count); + this.alienContainer.scale.y = Math.sin(this.count); + + this.alienContainer.rotation += 0.01; + + // render the stage + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +namespace demos { + + export class DraggableBunny extends PIXI.Sprite { + + //todo I dont know what event.data is at this time + private data: any; + + private dragging: boolean; + + constructor(texture?: PIXI.Texture) { + + super(texture); + + // enable the bunny to be interactive... this will allow it to respond to mouse and touch events + this.interactive = true; + + // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse + this.buttonMode = true; + + // center the bunny's anchor point + this.anchor.set(0.5); + + // make it a bit bigger, so it's easier to grab + this.scale.set(3); + + // setup events + this + // events for drag start + .on('mousedown', this.onDragStart) + .on('touchstart', this.onDragStart) + // events for drag end + .on('mouseup', this.onDragEnd) + .on('mouseupoutside', this.onDragEnd) + .on('touchend', this.onDragEnd) + .on('touchendoutside', this.onDragEnd) + // events for drag move + .on('mousemove', this.onDragMove) + .on('touchmove', this.onDragMove); + + } + + private onDragStart = (event: PIXI.interaction.InteractionEvent): void => { + + // store a reference to the data + // the reason for this is because of multitouch + // we want to track the movement of this particular touch + this.data = event.data; + this.alpha = 0.5; + this.dragging = true; + + } + + private onDragEnd = (event: PIXI.interaction.InteractionEvent): void => { + + //set interactiondata to null + this.data = null; + this.alpha = 1; + this.dragging = false; + + } + + private onDragMove = (event: PIXI.interaction.InteractionEvent): void => { + + if (this.dragging) { + var newPosition = this.data.getLocalPosition(this.parent); + this.position.x = newPosition.x; + this.position.y = newPosition.y; + } + + } + + } + + export class Dragging { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private texture: PIXI.Texture; + + private data: PIXI.interaction.InteractionData; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + //create a texture from an image + this.texture = PIXI.Texture.fromImage('../../_assets/bunny.png'); + + for (var i = 0; i < 10; i++) { + this.createBunny(Math.floor(Math.random() * 800), Math.floor(Math.random() * 600)); + } + + // start animating + this.animate(); + + } + + private createBunny(x: number, y: number): void { + + // create our little bunny friend.. + var bunny = new DraggableBunny(this.texture); + + // move the sprite to its designated position + bunny.position.x = x; + bunny.position.y = y; + + // add it to the stage + this.stage.addChild(bunny); + + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + +} + +namespace demos { + + export class GraphicsDemo { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private thing: PIXI.Graphics; + + private graphics: PIXI.Graphics; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; + + this.graphics = new PIXI.Graphics(); + + // set a fill and line style + this.graphics.beginFill(0xFF3300); + this.graphics.lineStyle(10, 0xffd900, 1); + + // draw a shape + this.graphics.moveTo(50, 50); + this.graphics.lineTo(250, 50); + this.graphics.lineTo(100, 100); + this.graphics.lineTo(250, 220); + this.graphics.lineTo(50, 220); + this.graphics.lineTo(50, 50); + this.graphics.endFill(); + + // set a fill and line style again + this.graphics.lineStyle(10, 0xFF0000, 0.8); + this.graphics.beginFill(0xFF700B, 1); + + // draw a second shape + this.graphics.moveTo(210, 300); + this.graphics.lineTo(450, 320); + this.graphics.lineTo(570, 350); + this.graphics.quadraticCurveTo(600, 0, 480, 100); + this.graphics.lineTo(330, 120); + this.graphics.lineTo(410, 200); + this.graphics.lineTo(210, 300); + this.graphics.endFill(); + + // draw a rectangle + this.graphics.lineStyle(2, 0x0000FF, 1); + this.graphics.drawRect(50, 250, 100, 100); + + // draw a circle + this.graphics.lineStyle(0); + this.graphics.beginFill(0xFFFF0B, 0.5); + this.graphics.drawCircle(470, 200, 100); + this.graphics.endFill(); + + this.graphics.lineStyle(20, 0x33FF00); + this.graphics.moveTo(30, 30); + this.graphics.lineTo(600, 300); + + this.stage.addChild(this.graphics); + + // let's create a moving shape + this.thing = new PIXI.Graphics(); + this.stage.addChild(this.thing); + this.thing.position.x = 620 / 2; + this.thing.position.y = 380 / 2; + + this.count = 0; + + // Just click on the stage to draw random lines + this.stage.on('click', this.onClick); + this.stage.on('tap', this.onClick); + + // start animating + this.animate(); + + } + + private onClick = (event: PIXI.interaction.InteractionEvent): void => { + + this.graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1); + this.graphics.moveTo(Math.random() * 620, Math.random() * 380); + this.graphics.bezierCurveTo(Math.random() * 620, Math.random() * 380, + Math.random() * 620, Math.random() * 380, + Math.random() * 620, Math.random() * 380); + } + + private animate = (): void => { + + this.thing.clear(); + + this.count += 0.1; + + this.thing.clear(); + this.thing.lineStyle(10, 0xff0000, 1); + this.thing.beginFill(0xffFF00, 0.5); + + this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); + this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20); + this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20); + this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20); + this.thing.lineTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); + + this.thing.rotation = this.count * 0.1; + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + } + + } + +} + +namespace demos { + + export class Interactivity { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private background: PIXI.Sprite; + + private buttons: InteractivityButton[]; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // create a background... + this.background = PIXI.Sprite.fromImage('../../_assets/button_test_BG.jpg'); + this.background.width = this.renderer.width; + this.background.height = this.renderer.height; + + // add background to stage... + this.stage.addChild(this.background); + + this.buttons = []; + + var buttonPositions = [ + 175, 75, + 655, 75, + 410, 325, + 150, 465, + 685, 445 + ]; + + function noop(): void { + console.log('click'); + } + + // create some textures from an image path + var textureButton = PIXI.Texture.fromImage('../../_assets/button.png'); + var textureButtonDown = PIXI.Texture.fromImage('../../_assets/buttonDown.png'); + var textureButtonOver = PIXI.Texture.fromImage('../../_assets/buttonOver.png'); + + for (var i = 0; i < 5; i++) { + + var button = new InteractivityButton(textureButton, textureButtonDown, textureButtonOver); + + button.position.x = buttonPositions[i * 2]; + button.position.y = buttonPositions[i * 2 + 1]; + + button.tap = noop; + button.click = noop; + + // add it to the stage + this.stage.addChild(button); + + // add button to array + this.buttons.push(button); + + } + + // set some silly values... + this.buttons[0].scale.set(1.2); + + this.buttons[2].rotation = Math.PI / 10; + + this.buttons[3].scale.set(0.8); + + this.buttons[4].scale.set(0.8, 1.2); + this.buttons[4].rotation = Math.PI; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + + export class InteractivityButton extends PIXI.Sprite { + + private textureButton: PIXI.Texture; + private textureButtonDown: PIXI.Texture; + private textureButtonOver: PIXI.Texture; + + tap: Function; + click: Function; + + isdown: boolean; + isOver: boolean; + + constructor(textureButton: PIXI.Texture, textureButtonDown: PIXI.Texture, textureButtonOver: PIXI.Texture) { + + super(textureButton); + + // create some textures from an image path + this.textureButton = textureButton; + this.textureButtonDown = textureButtonDown; + this.textureButtonOver = textureButtonOver; + + this.buttonMode = true; + this.anchor.set(0.5); + + // make the button interactive... + this.interactive = true; + + this + // set the mousedown and touchstart callback... + .on('mousedown', this.onButtonDown) + .on('touchstart', this.onButtonDown) + + // set the mouseup and touchend callback... + .on('mouseup', this.onButtonUp) + .on('touchend', this.onButtonUp) + .on('mouseupoutside', this.onButtonUp) + .on('touchendoutside', this.onButtonUp) + + // set the mouseover callback... + .on('mouseover', this.onButtonOver) + + // set the mouseout callback... + .on('mouseout', this.onButtonOut) + + // you can also listen to click and tap events : + //.on('click', this.noop) + + } + + private onButtonDown = (event: PIXI.interaction.InteractionEvent): void => { + + this.isdown = true; + this.texture = this.textureButtonDown; + this.alpha = 1; + + } + + private onButtonUp = (event: PIXI.interaction.InteractionEvent): void => { + + this.isdown = false; + + if (this.isOver) { + this.texture = this.textureButtonOver; + } + else { + this.texture = this.textureButton; + } + } + + private onButtonOver = (event: PIXI.interaction.InteractionEvent): void => { + + this.isOver = true; + + if (this.isdown) { + return; + } + + this.texture = this.textureButtonOver; + + } + + private onButtonOut = (event: PIXI.interaction.InteractionEvent): void => { + + this.isOver = false; + + if (this.isdown) { + return; + } + + this.texture = this.textureButton; + } + + } + +} + +namespace demos { + + export class Masking { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private bg: PIXI.Sprite; + + private container: PIXI.Container; + + private bgFront: PIXI.Sprite; + + private light1: PIXI.Sprite; + + private light2: PIXI.Sprite; + + private panda: PIXI.Sprite; + + private thing: PIXI.Graphics; + + private count: number; + + private help: PIXI.Text; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb, antialias: true }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; + + this.bg = PIXI.Sprite.fromImage('../../_assets/BGrotate.jpg'); + this.bg.anchor.x = 0.5; + this.bg.anchor.y = 0.5; + + this.bg.position.x = this.renderer.width / 2; + this.bg.position.y = this.renderer.height / 2; + + this.stage.addChild(this.bg); + + this.container = new PIXI.Container(); + this.container.position.x = this.renderer.width / 2; + this.container.position.y = this.renderer.height / 2; + + // add a bunch of sprites + + this.bgFront = PIXI.Sprite.fromImage('../../_assets/SceneRotate.jpg'); + this.bgFront.anchor.x = 0.5; + this.bgFront.anchor.y = 0.5; + + this.container.addChild(this.bgFront); + + this.light2 = PIXI.Sprite.fromImage('../../_assets/LightRotate2.png'); + this.light2.anchor.x = 0.5; + this.light2.anchor.y = 0.5; + this.container.addChild(this.light2); + + this.light1 = PIXI.Sprite.fromImage('../../_assets/LightRotate1.png'); + this.light1.anchor.x = 0.5; + this.light1.anchor.y = 0.5; + this.container.addChild(this.light1); + + this.panda = PIXI.Sprite.fromImage('../../_assets/panda.png'); + this.panda.anchor.x = 0.5; + this.panda.anchor.y = 0.5; + + this.container.addChild(this.panda); + + this.stage.addChild(this.container); + + // let's create a moving shape + this.thing = new PIXI.Graphics(); + this.stage.addChild(this.thing); + this.thing.position.x = this.renderer.width / 2; + this.thing.position.y = this.renderer.height / 2; + this.thing.lineStyle(0); + + this.container.mask = this.thing; + + this.count = 0; + + this.stage.on('click', this.onClick); + this.stage.on('tap', this.onClick); + + this.help = new PIXI.Text('Click to turn masking on / off.', { font: 'bold 12pt Arial', fill: 'white' }); + this.help.position.y = this.renderer.height - 26; + this.help.position.x = 10; + this.stage.addChild(this.help); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + this.bg.rotation += 0.01; + this.bgFront.rotation -= 0.01; + + this.light1.rotation += 0.02; + this.light2.rotation += 0.01; + + this.panda.scale.x = 1 + Math.sin(this.count) * 0.04; + this.panda.scale.y = 1 + Math.cos(this.count) * 0.04; + + this.count += 0.1; + + this.thing.clear(); + + this.thing.beginFill(0x8bc5ff, 0.4); + this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); + this.thing.lineTo(-320 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20); + this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20); + this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20); + this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20); + this.thing.lineTo(-120 + Math.sin(this.count) * 20, -300 + Math.cos(this.count) * 20); + this.thing.lineTo(-320 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); + this.thing.rotation = this.count * 0.1; + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + private onClick = (event: PIXI.interaction.InteractionEvent): void => { + + if (!this.container.mask) { + this.container.mask = this.thing; + } + else { + this.container.mask = null; + } + } + + } + +} + +namespace demos { + + export class MovieClipDemo { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + PIXI.loader + .add('spritesheet', '../../_assets/mc.json') + .load(this.onAssetsLoaded); + + // start animating + this.animate(); + + } + + private onAssetsLoaded = (loader: PIXI.loaders.Loader): void => { + + // create an array to store the textures + var explosionTextures: PIXI.Texture[] = []; + var i: number; + + for (i = 0; i < 26; i++) { + + var texture = PIXI.Texture.fromFrame('Explosion_Sequence_A ' + (i + 1) + '.png'); + explosionTextures.push(texture); + + } + + for (i = 0; i < 50; i++) { + + // create an explosion MovieClip + var explosion = new PIXI.extras.MovieClip(explosionTextures); + + explosion.position.x = Math.random() * 800; + explosion.position.y = Math.random() * 600; + explosion.anchor.x = 0.5; + explosion.anchor.y = 0.5; + + explosion.rotation = Math.random() * Math.PI; + + explosion.scale.set(0.75 + Math.random() * 0.5); + + explosion.gotoAndPlay(Math.random() * 27); + + this.stage.addChild(explosion); + + } + + // start animating + this.animate(); + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + +} + +namespace demos { + + export class RenderTextureDemo { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private renderTexture: PIXI.RenderTexture; + private renderTexture2: PIXI.RenderTexture; + private currentTexture: PIXI.RenderTexture; + + private outputSprite: PIXI.Sprite; + private stuffContainer: PIXI.Container; + private items: PIXI.Sprite[]; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // create two render textures... these dynamic textures will be used to draw the scene into itself + this.renderTexture = new PIXI.RenderTexture(this.renderer, this.renderer.width, this.renderer.height); + this.renderTexture2 = new PIXI.RenderTexture(this.renderer, this.renderer.width, this.renderer.height); + this.currentTexture = this.renderTexture; + + // create a new sprite that uses the render texture we created above + this.outputSprite = new PIXI.Sprite(this.currentTexture); + + // align the sprite + this.outputSprite.position.x = 400; + this.outputSprite.position.y = 300; + this.outputSprite.anchor.set(0.5); + + // add to stage + this.stage.addChild(this.outputSprite); + + this.stuffContainer = new PIXI.Container(); + + this.stuffContainer.position.x = 400; + this.stuffContainer.position.y = 300; + + this.stage.addChild(this.stuffContainer); + + // create an array of image ids.. + var fruits = [ + '../../_assets/spinObj_01.png', + '../../_assets/spinObj_02.png', + '../../_assets/spinObj_03.png', + '../../_assets/spinObj_04.png', + '../../_assets/spinObj_05.png', + '../../_assets/spinObj_06.png', + '../../_assets/spinObj_07.png', + '../../_assets/spinObj_08.png' + ]; + + // create an array of items + this.items = []; + + // now create some items and randomly position them in the stuff container + for (var i = 0; i < 20; i++) { + + var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]); + item.position.x = Math.random() * 400 - 200; + item.position.y = Math.random() * 400 - 200; + + item.anchor.set(0.5); + + this.stuffContainer.addChild(item); + + this.items.push(item); + + } + + // used for spinning! + this.count = 0; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + for (var i = 0; i < this.items.length; i++) { + // rotate each item + var item = this.items[i]; + item.rotation += 0.1; + } + + this.count += 0.01; + + // swap the buffers ... + var temp = this.renderTexture; + this.renderTexture = this.renderTexture2; + this.renderTexture2 = temp; + + // set the new texture + this.outputSprite.texture = this.renderTexture; + + // twist this up! + this.stuffContainer.rotation -= 0.01; + this.outputSprite.scale.set(1 + Math.sin(this.count) * 0.2); + + // render the stage to the texture + // the 'true' clears the texture before the content is rendered + this.renderTexture2.render(this.stage, null, false); + + // and finally render the stage + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +namespace demos { + + export class StripDemo { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private count: number; + + private points: PIXI.Point[]; + + private strip: PIXI.mesh.Rope; + + private snakeContainer: PIXI.Container; + + private ropeLength: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.count = 0; + + // build a rope! + this.ropeLength = 918 / 20; + + this.points = []; + + for (var i = 0; i < 20; i++) { + this.points.push(new PIXI.Point(i * this.ropeLength, 0)); + } + + this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('../../_assets/snake.png'), this.points); + this.strip.x = -459; + + this.snakeContainer = new PIXI.Container(); + this.snakeContainer.position.x = 400; + this.snakeContainer.position.y = 300; + + this.snakeContainer.scale.set(800 / 1100); + this.stage.addChild(this.snakeContainer); + + this.snakeContainer.addChild(this.strip); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + this.count += 0.1; + + // make the snake + for (var i = 0; i < this.points.length; i++) { + + this.points[i].y = Math.sin((i * 0.5) + this.count) * 30; + + this.points[i].x = i * this.ropeLength + Math.cos((i * 0.3) + this.count) * 20; + + } + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +namespace demos { + + export class TextDemo { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private bitmapFontText: PIXI.extras.BitmapText; + + private background: PIXI.Sprite; + + private textSample: PIXI.Text; + + private spinningText: PIXI.Text; + + private countingText: PIXI.Text; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + PIXI.loader + .add('desyrel', '../../_assets/desyrel.xml') + .load(this.onAssetsLoaded); + + // start animating + this.animate(); + + } + + private onAssetsLoaded = (): void => { + + this.bitmapFontText = new PIXI.extras.BitmapText('bitmap fonts are\n now supported!', { font: '35px Desyrel', align: 'right' }); + + this.bitmapFontText.position.x = 600 - this.bitmapFontText.textWidth; + this.bitmapFontText.position.y = 20; + + this.stage.addChild(this.bitmapFontText); + + // add a shiny background... + this.background = PIXI.Sprite.fromImage('../../_assets/textDemoBG.jpg'); + this.stage.addChild(this.background); + + // create some white text using the Snippet webfont + this.textSample = new PIXI.Text('Pixi.js can has\n multiline text!', { font: '35px Snippet', fill: 'white', align: 'left' }); + this.textSample.position.set(20); + + // create a text object with a nice stroke + this.spinningText = new PIXI.Text('I\'m fun!', { font: 'bold 60px Arial', fill: '#cc00ff', align: 'center', stroke: '#FFFFFF', strokeThickness: 6 }); + + // setting the anchor point to 0.5 will center align the text... great for spinning! + this.spinningText.anchor.set(0.5); + this.spinningText.position.x = 310; + this.spinningText.position.y = 200; + + // create a text object that will be updated... + this.countingText = new PIXI.Text('COUNT 4EVAR: 0', { font: 'bold italic 60px Arvo', fill: '#3e1707', align: 'center', stroke: '#a4410e', strokeThickness: 7 }); + + this.countingText.position.x = 310; + this.countingText.position.y = 320; + this.countingText.anchor.x = 0.5; + + this.stage.addChild(this.textSample); + this.stage.addChild(this.spinningText); + this.stage.addChild(this.countingText); + + this.count = 0; + + } + + private animate = (): void => { + + + this.renderer.render(this.stage); + + this.count += 0.05; + + // update the text with a new string + this.countingText.text = 'COUNT 4EVAR: ' + Math.floor(this.count); + + // let's spin the spinning text + this.spinningText.rotation += 0.03; + + requestAnimationFrame(this.animate); + } + + } + +} + +namespace demos { + + export class TextureSwap { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private bol: boolean; + + private texture: PIXI.Texture; + private secondTexture: PIXI.Texture; + + private dude: PIXI.Sprite; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.bol = false; + + //an image path + this.texture = PIXI.Texture.fromImage('../../_assets/flowerTop.png'); + + // create a second texture + this.secondTexture = PIXI.Texture.fromImage('../../_assets/eggHead.png'); + + // create a new Sprite using the texture + this.dude = new PIXI.Sprite(this.texture); + + // center the sprites anchor point + this.dude.anchor.set(0.5); + + // move the sprite to the center of the screen + this.dude.position.x = this.renderer.width / 2; + this.dude.position.y = this.renderer.height / 2; + + this.stage.addChild(this.dude); + + // make the sprite interactive + this.dude.interactive = true; + + this.dude.on('click', (): void => { + this.bol = !this.bol; + + if (this.bol) { + this.dude.texture = this.secondTexture; + } + else { + this.dude.texture = this.texture; + } + }); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // just for fun, let's rotate mr rabbit a little + this.dude.rotation += 0.1; + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +namespace demos { + + export class Tinting { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private totalDudes: number = 10; + private aliens: TintingDude[]; + + private dudeBounds: PIXI.Rectangle; + + private tick: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // holder to store the aliens + this.aliens = []; + + this.tick = 0; + + for (var i = 0; i < this.totalDudes; i++) { + + // create a new Sprite that uses the image name that we just generated as its source + var dude = new TintingDude(); + + // set the anchor point so the texture is centerd on the sprite + dude.anchor.set(0.5); + + // set a random scale for the dude - no point them all being the same size! + dude.scale.set(0.8 + Math.random() * 0.3); + + // finally lets set the dude to be at a random position.. + dude.position.x = Math.random() * this.renderer.width; + dude.position.y = Math.random() * this.renderer.height; + + dude.tint = Math.random() * 0xFFFFFF; + + // create some extra properties that will control movement : + // create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees + dude.direction = Math.random() * Math.PI * 2; + + // this number will be used to modify the direction of the dude over time + dude.turningSpeed = Math.random() - 0.8; + + // create a random speed for the dude between 0 - 2 + dude.speed = 2 + Math.random() * 2; + + // finally we push the dude into the aliens array so it it can be easily accessed later + this.aliens.push(dude); + + this.stage.addChild(dude); + + } + + // create a bounding box for the little dudes + var dudeBoundsPadding = 100; + this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding, + -dudeBoundsPadding, + this.renderer.width + dudeBoundsPadding * 2, + this.renderer.height + dudeBoundsPadding * 2); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // iterate through the dudes and update their position + for (var i = 0; i < this.aliens.length; i++) { + + var dude = this.aliens[i]; + dude.direction += dude.turningSpeed * 0.01; + dude.position.x += Math.sin(dude.direction) * dude.speed; + dude.position.y += Math.cos(dude.direction) * dude.speed; + dude.rotation = -dude.direction - Math.PI / 2; + + // wrap the dudes by testing their bounds... + if (dude.position.x < this.dudeBounds.x) { + dude.position.x += this.dudeBounds.width; + } + else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) { + dude.position.x -= this.dudeBounds.width; + } + + if (dude.position.y < this.dudeBounds.y) { + dude.position.y += this.dudeBounds.height; + } + else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) { + dude.position.y -= this.dudeBounds.height; + } + + } + + // increment the ticker + this.tick += 0.1; + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + + export class TintingDude extends PIXI.Sprite { + + direction: number; + speed: number; + turningSpeed: number; + + constructor() { + super(PIXI.Texture.fromImage('../../_assets/eggHead.png')); + } + + } + +} + +namespace demos { + + export class TransparentBackground { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private bunny: PIXI.Sprite; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb, transparent: true }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // create a new Sprite from an image path. + this.bunny = PIXI.Sprite.fromImage('../../_assets/bunny.png'); + + // center the sprite's anchor point + this.bunny.anchor.set(0.5); + + // move the sprite to the center of the screen + this.bunny.position.x = 200; + this.bunny.position.y = 150; + + this.stage.addChild(this.bunny); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // just for fun, let's rotate mr rabbit a little + this.bunny.rotation += 0.1; + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +namespace filters { + + export class Blur { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private bg: PIXI.Sprite; + + private littleDudes: PIXI.Sprite; + private littleRobot: PIXI.Sprite; + + private blurFilter1: PIXI.filters.BlurFilter; + private blurFilter2: PIXI.filters.BlurFilter; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.bg = PIXI.Sprite.fromImage('../../_assets/depth_blur_BG.jpg'); + this.bg.width = this.renderer.width; + this.bg.height = this.renderer.height; + this.stage.addChild(this.bg); + + this.littleDudes = PIXI.Sprite.fromImage('../../_assets/depth_blur_dudes.jpg'); + this.littleDudes.position.x = (this.renderer.width / 2) - 315; + this.littleDudes.position.y = 200; + this.stage.addChild(this.littleDudes); + + this.littleRobot = PIXI.Sprite.fromImage('../../_assets/depth_blur_moby.jpg'); + this.littleRobot.position.x = (this.renderer.width / 2) - 200; + this.littleRobot.position.y = 100; + this.stage.addChild(this.littleRobot); + + this.blurFilter1 = new PIXI.filters.BlurFilter(); + this.blurFilter2 = new PIXI.filters.BlurFilter(); + + this.littleDudes.filters = [this.blurFilter1]; + this.littleRobot.filters = [this.blurFilter2]; + + this.count = 0; + + //nimate + this.animate(); + + } + + private animate = (): void => { + + this.count += 0.005; + + var blurAmount = Math.cos(this.count); + var blurAmount2 = Math.sin(this.count); + + this.blurFilter1.blur = 20 * (blurAmount); + this.blurFilter2.blur = 20 * (blurAmount2); + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +namespace filters { + + export class DisplacementMap { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private container: PIXI.Container; + + private padding: number; + + private bounds: PIXI.Rectangle; + + private maggots: DisplacementMapDude[]; + + private displacementSprite: PIXI.Sprite; + + private displacementFilter: PIXI.filters.DisplacementFilter; + + private ring: PIXI.Sprite; + + private bg: PIXI.Sprite; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; + + this.container = new PIXI.Container(); + this.stage.addChild(this.container); + + this.padding = 100; + + this.bounds = new PIXI.Rectangle(-this.padding, -this.padding, this.renderer.width + this.padding * 2, this.renderer.height + this.padding * 2); + this.maggots = []; + + for (var i = 0; i < 20; i++) { + + var maggot = new DisplacementMapDude(); + maggot.anchor.set(0.5); + this.container.addChild(maggot); + + maggot.direction = Math.random() * Math.PI * 2; + maggot.speed = 1; + maggot.turnSpeed = Math.random() - 0.8; + + maggot.position.x = Math.random() * this.bounds.width; + maggot.position.y = Math.random() * this.bounds.height; + + maggot.scale.set(1 + Math.random() * 0.3); + maggot.original = maggot.scale.clone(); + this.maggots.push(maggot); + + } + + this.displacementSprite = PIXI.Sprite.fromImage('../../_assets/displace.png'); + this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite); + + this.stage.addChild(this.displacementSprite); + + this.container.filters = [this.displacementFilter]; + + this.displacementFilter.scale.x = 110; + this.displacementFilter.scale.y = 110; + + this.ring = PIXI.Sprite.fromImage('../../_assets/ring.png'); + + this.ring.anchor.set(0.5); + + this.ring.visible = false; + + this.stage.addChild(this.ring); + + this.bg = PIXI.Sprite.fromImage('../../_assets/bkg-grass.jpg'); + this.bg.width = this.renderer.width; + this.bg.height = this.renderer.height; + + this.bg.alpha = 0.4; + + this.container.addChild(this.bg); + + this.stage + .on('mousemove', this.onPointerMove) + .on('touchmove', this.onPointerMove); + + this.count = 0; + + this.animate(); + + } + + private onPointerMove = (eventData: PIXI.interaction.InteractionEvent): void => { + + this.ring.visible = true; + + this.displacementSprite.x = eventData.data.global.x - 100; + this.displacementSprite.y = eventData.data.global.y - this.displacementSprite.height / 2; + + this.ring.position.x = eventData.data.global.x - 25; + this.ring.position.y = eventData.data.global.y; + + }; + + private animate = (): void => { + + this.count += 0.05; + + for (var i = 0; i < this.maggots.length; i++) { + var maggot = this.maggots[i]; + + maggot.direction += maggot.turnSpeed * 0.01; + maggot.position.x += Math.sin(maggot.direction) * maggot.speed; + maggot.position.y += Math.cos(maggot.direction) * maggot.speed; + + maggot.rotation = -maggot.direction - Math.PI / 2; + + maggot.scale.x = maggot.original.x + Math.sin(this.count) * 0.2; + + // wrap the maggots around as the crawl + if (maggot.position.x < this.bounds.x) { + maggot.position.x += this.bounds.width; + } + else if (maggot.position.x > this.bounds.x + this.bounds.width) { + maggot.position.x -= this.bounds.width; + } + + if (maggot.position.y < this.bounds.y) { + maggot.position.y += this.bounds.height; + } + else if (maggot.position.y > this.bounds.y + this.bounds.height) { + maggot.position.y -= this.bounds.height; + } + } + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + }; + + } + + export class DisplacementMapDude extends PIXI.Sprite { + + direction: number; + speed: number; + turnSpeed: number; + original: PIXI.Point; + + constructor() { + + super(PIXI.Texture.fromImage('../../_assets/maggot.png')); + + } + + } + +} + +namespace filters { + + export class Filter { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private background: PIXI.Sprite; + + private filter: PIXI.filters.ColorMatrixFilter; + + private container: PIXI.Container; + + private bgFront: PIXI.Sprite; + private light2: PIXI.Sprite; + private light1: PIXI.Sprite; + private panda: PIXI.Sprite; + + private count: number; + private switchy: boolean; + + private help: PIXI.Text; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; + + // create a texture from an image path + var texture: PIXI.Texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png"); + + this.background = PIXI.Sprite.fromImage('_assets/BGrotate.jpg'); + this.background.anchor.set(0.5); + + this.background.position.x = this.renderer.width / 2; + this.background.position.y = this.renderer.height / 2; + + this.filter = new PIXI.filters.ColorMatrixFilter(); + + this.container = new PIXI.Container(); + this.container.position.x = this.renderer.width / 2; + this.container.position.y = this.renderer.height / 2; + + this.bgFront = PIXI.Sprite.fromImage('../../_assets/SceneRotate.jpg'); + this.bgFront.anchor.set(0.5); + + this.container.addChild(this.bgFront); + + this.light2 = PIXI.Sprite.fromImage('../../_assets/LightRotate2.png'); + this.light2.anchor.set(0.5); + this.container.addChild(this.light2); + + this.light1 = PIXI.Sprite.fromImage('../../_assets/LightRotate1.png'); + this.light1.anchor.set(0.5); + this.container.addChild(this.light1); + + this.panda = PIXI.Sprite.fromImage('../../_assets/panda.png'); + this.panda.anchor.set(0.5); + + this.container.addChild(this.panda); + + this.stage.addChild(this.container); + + this.stage.filters = [this.filter]; + + this.count = 0; + this.switchy = false; + + this.stage.on('click', this.onClick); + this.stage.on('tap', this.onClick); + + + this.help = new PIXI.Text('Click to turn filters on / off.', { font: 'bold 12pt Arial', fill: 'white' }); + this.help.position.y = this.renderer.height - 25; + this.help.position.x = 10; + + this.stage.addChild(this.help); + + //nimate + this.animate(); + + } + + private onClick = (): void => { + + this.switchy = !this.switchy; + + if (!this.switchy) { + this.stage.filters = [this.filter]; + } + else { + this.stage.filters = null; + } + + } + + private animate = (): void => { + + this.background.rotation += 0.01; + this.bgFront.rotation -= 0.01; + + this.light1.rotation += 0.02; + this.light2.rotation += 0.01; + + this.panda.scale.x = 1 + Math.sin(this.count) * 0.04; + this.panda.scale.y = 1 + Math.cos(this.count) * 0.04; + + this.count += 0.1; + + var matrix = this.filter.matrix; + + matrix[1] = Math.sin(this.count) * 3; + matrix[2] = Math.cos(this.count); + matrix[3] = Math.cos(this.count) * 1.5; + matrix[4] = Math.sin(this.count / 3) * 2; + matrix[5] = Math.sin(this.count / 2); + matrix[6] = Math.sin(this.count / 4); + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} diff --git a/pixi.js/v3/pixi.js.d.ts b/pixi.js/v3/pixi.js.d.ts new file mode 100644 index 0000000000..3de0f3f296 --- /dev/null +++ b/pixi.js/v3/pixi.js.d.ts @@ -0,0 +1,1748 @@ +// Type definitions for Pixi.js 3.0.9 dev +// Project: https://github.com/GoodBoyDigital/pixi.js/ +// Definitions by: clark-stevenson +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare class PIXI { + + static VERSION: string; + static PI_2: number; + static RAD_TO_DEG: number; + static DEG_TO_RAD: number; + static TARGET_FPMS: number; + static RENDERER_TYPE: { + UNKNOWN: number; + WEBGL: number; + CANVAS: number; + }; + static BLEND_MODES: { + NORMAL: number; + ADD: number; + MULTIPLY: number; + SCREEN: number; + OVERLAY: number; + DARKEN: number; + LIGHTEN: number; + COLOR_DODGE: number; + COLOR_BURN: number; + HARD_LIGHT: number; + SOFT_LIGHT: number; + DIFFERENCE: number; + EXCLUSION: number; + HUE: number; + SATURATION: number; + COLOR: number; + LUMINOSITY: number; + + }; + static DRAW_MODES: { + POINTS: number; + LINES: number; + LINE_LOOP: number; + LINE_STRIP: number; + TRIANGLES: number; + TRIANGLE_STRIP: number; + TRIANGLE_FAN: number; + }; + static SCALE_MODES: { + DEFAULT: number; + LINEAR: number; + NEAREST: number; + }; + static RETINA_PREFIX: string; + static RESOLUTION: number; + static FILTER_RESOLUTION: number; + static DEFAULT_RENDER_OPTIONS: { + view: HTMLCanvasElement; + resolution: number; + antialias: boolean; + forceFXAA: boolean; + autoResize: boolean; + transparent: boolean; + backgroundColor: number; + clearBeforeRender: boolean; + preserveDrawingBuffer: boolean; + roundPixels: boolean; + }; + static SHAPES: { + POLY: number; + RECT: number; + CIRC: number; + ELIP: number; + RREC: number; + }; + static SPRITE_BATCH_SIZE: number; + +} + +declare namespace PIXI { + + export function autoDetectRenderer(width: number, height: number, options?: PIXI.RendererOptions, noWebGL?: boolean): PIXI.WebGLRenderer | PIXI.CanvasRenderer; + export var loader: PIXI.loaders.Loader; + + //https://github.com/primus/eventemitter3 + export class EventEmitter { + + listeners(event: string): Function[]; + emit(event: string, ...args: any[]): boolean; + on(event: string, fn: Function, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + removeListener(event: string, fn?: Function, context?: any, once?: boolean): EventEmitter; + removeAllListeners(event?: string): EventEmitter; + + off(event: string, fn?: Function, context?: any, once?: boolean): EventEmitter; + addListener(event: string, fn: Function, context?: any): EventEmitter; + + } + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////CORE////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + //display + + export class DisplayObject extends EventEmitter implements interaction.InteractiveTarget { + + //begin extras.cacheAsBitmap see https://github.com/pixijs/pixi-typescript/commit/1207b7f4752d79a088d6a9a465a3ec799906b1db + protected _originalRenderWebGL: WebGLRenderer; + protected _originalRenderCanvas: CanvasRenderer; + protected _originalUpdateTransform: boolean; + protected _originalHitTest: any; + protected _cachedSprite: any; + protected _originalDestroy: any; + + cacheAsBitmap: boolean; + + protected _renderCachedWebGL(renderer: WebGLRenderer): void; + protected _initCachedDisplayObject(renderer: WebGLRenderer): void; + protected _renderCachedCanvas(renderer: CanvasRenderer): void; + protected _initCachedDisplayObjectCanvas(renderer: CanvasRenderer): void; + protected _getCachedBounds(): Rectangle; + protected _destroyCachedDisplayObject(): void; + protected _cacheAsBitmapDestroy(): void; + //end extras.cacheAsBitmap + + protected _sr: number; + protected _cr: number; + protected _bounds: Rectangle; + protected _currentBounds: Rectangle; + protected _mask: Rectangle; + protected _cachedObject: any; + + updateTransform(): void; + + position: Point; + scale: Point; + pivot: Point; + rotation: number; + renderable: boolean; + alpha: number; + visible: boolean; + parent: Container; + worldAlpha: number; + worldTransform: Matrix; + filterArea: Rectangle; + + x: number; + y: number; + worldVisible: boolean; + mask: Graphics | Sprite; + filters: AbstractFilter[]; + name: string; + + getBounds(matrix?: Matrix): Rectangle; + getLocalBounds(): Rectangle; + toGlobal(position: Point): Point; + toLocal(position: Point, from?: DisplayObject): Point; + generateTexture(renderer: CanvasRenderer | WebGLRenderer, scaleMode: number, resolution: number): Texture; + setParent(container: Container): Container; + setTransform(x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, skewX?: number, skewY?: number, pivotX?: number, pivotY?: number): DisplayObject; + destroy(): void; + getChildByName(name: string): DisplayObject; + getGlobalPosition(point: Point): Point; + + interactive: boolean; + buttonMode: boolean; + interactiveChildren: boolean; + defaultCursor: string; + hitArea: HitArea; + + on(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: string, fn: Function, context?: any): EventEmitter; + + once(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + + } + + export class Container extends DisplayObject { + + protected _renderWebGL(renderer: WebGLRenderer): void; + protected _renderCanvas(renderer: CanvasRenderer): void; + + protected onChildrenChange: () => void; + + children: DisplayObject[]; + + width: number; + height: number; + + addChild(...child: DisplayObject[]): DisplayObject; + addChildAt(child: DisplayObject, index: number): DisplayObject; + swapChildren(child: DisplayObject, child2: DisplayObject): void; + getChildIndex(child: DisplayObject): number; + setChildIndex(child: DisplayObject, index: number): void; + getChildAt(index: number): DisplayObject; + removeChild(child: DisplayObject): DisplayObject; + removeChildAt(index: number): DisplayObject; + removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[]; + destroy(destroyChildren?: boolean): void; + generateTexture(renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer, resolution?: number, scaleMode?: number): Texture; + + renderWebGL(renderer: WebGLRenderer): void; + renderCanvas(renderer: CanvasRenderer): void; + + once(event: 'added', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + once(event: 'removed', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + on(event: 'added', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: string, fn: Function, context?: any): EventEmitter; + on(event: 'removed', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: string, fn: Function, context?: any): EventEmitter; + + } + + //graphics + + export class GraphicsData { + + constructor(lineWidth: number, lineColor: number, lineAlpha: number, fillColor: number, fillAlpha: number, fill: boolean, shape: Circle | Rectangle | Ellipse | Polygon); + + lineWidth: number; + lineColor: number; + lineAlpha: number; + fillColor: number; + fillAlpha: number; + fill: boolean; + shape: Circle | Rectangle | Ellipse | Polygon; + type: number; + + clone(): GraphicsData; + + protected _lineTint: number; + protected _fillTint: number; + + } + export class Graphics extends Container { + + protected boundsDirty: boolean; + protected dirty: boolean; + protected glDirty: boolean; + + fillAlpha: number; + lineWidth: number; + lineColor: number; + tint: number; + blendMode: number; + isMask: boolean; + boundsPadding: number; + + clone(): Graphics; + lineStyle(lineWidth?: number, color?: number, alpha?: number): Graphics; + moveTo(x: number, y: number): Graphics; + lineTo(x: number, y: number): Graphics; + quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): Graphics; + bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): Graphics; + arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): Graphics; + arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): Graphics; + beginFill(color: number, alpha?: number): Graphics; + endFill(): Graphics; + drawRect(x: number, y: number, width: number, height: number): Graphics; + drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): Graphics; + drawCircle(x: number, y: number, radius: number): Graphics; + drawEllipse(x: number, y: number, width: number, height: number): Graphics; + drawPolygon(path: number[] | Point[]): Graphics; + clear(): Graphics; + //todo + generateTexture(renderer: WebGLRenderer | CanvasRenderer, resolution?: number, scaleMode?: number): Texture; + getBounds(matrix?: Matrix): Rectangle; + containsPoint(point: Point): boolean; + updateLocalBounds(): void; + drawShape(shape: Circle | Rectangle | Ellipse | Polygon): GraphicsData; + + } + export interface GraphicsRenderer extends ObjectRenderer { + //yikes todo + } + export interface WebGLGraphicsData { + //yikes todo! + } + + //math + + export class Point { + + x: number; + y: number; + + constructor(x?: number, y?: number); + + clone(): Point; + copy(p: Point): void; + equals(p: Point): boolean; + set(x?: number, y?: number): void; + + } + export class Matrix { + + a: number; + b: number; + c: number; + d: number; + tx: number; + ty: number; + + fromArray(array: number[]): void; + toArray(transpose?: boolean, out?: number[]): number[]; + apply(pos: Point, newPos?: Point): Point; + applyInverse(pos: Point, newPos?: Point): Point; + translate(x: number, y: number): Matrix; + scale(x: number, y: number): Matrix; + rotate(angle: number): Matrix; + append(matrix: Matrix): Matrix; + prepend(matrix: Matrix): Matrix; + invert(): Matrix; + identity(): Matrix; + clone(): Matrix; + copy(matrix: Matrix): Matrix; + set(a: number, b: number, c: number, d: number, tx: number, ty: number): Matrix; + setTransform(a: number, b: number, c: number, d: number, sr: number, cr: number, cy: number, sy: number, nsx: number, cs: number): PIXI.Matrix; + + static IDENTITY: Matrix; + static TEMP_MATRIX: Matrix; + + } + + export interface HitArea { + + contains(x: number, y: number): boolean; + + } + + export class Circle implements HitArea { + + constructor(x?: number, y?: number, radius?: number); + + x: number; + y: number; + radius: number; + type: number; + + clone(): Circle; + contains(x: number, y: number): boolean; + getBounds(): Rectangle; + + } + export class Ellipse implements HitArea { + + constructor(x?: number, y?: number, width?: number, height?: number); + + x: number; + y: number; + width: number; + height: number; + type: number; + + clone(): Ellipse; + contains(x: number, y: number): boolean; + getBounds(): Rectangle; + + } + export class Polygon implements HitArea { + + constructor(points: Point[]); + constructor(points: number[]); + constructor(...points: Point[]); + constructor(...points: number[]); + + closed: boolean; + points: number[]; + type: number; + + clone(): Polygon; + contains(x: number, y: number): boolean; + + + } + export class Rectangle implements HitArea { + + constructor(x?: number, y?: number, width?: number, height?: number); + + x: number; + y: number; + width: number; + height: number; + type: number; + + static EMPTY: Rectangle; + + clone(): Rectangle; + contains(x: number, y: number): boolean; + + } + export class RoundedRectangle implements HitArea { + + constructor(x?: number, y?: number, width?: number, height?: number, radius?: number); + + x: number; + y: number; + width: number; + height: number; + radius: number; + type: number; + + static EMPTY: Rectangle; + + clone(): Rectangle; + contains(x: number, y: number): boolean; + + } + + //particles + + export interface ParticleContainerProperties { + + scale?: boolean; + position?: boolean; + rotation?: boolean; + uvs?: boolean; + alpha?: boolean; + + } + export class ParticleContainer extends Container { + + constructor(size?: number, properties?: ParticleContainerProperties, batchSize?: number); + + protected _maxSize: number; + protected _batchSize: number; + protected _properties: boolean[]; + protected _buffers: WebGLBuffer[]; + protected _bufferToUpdate: number; + + protected onChildrenChange: (smallestChildIndex?: number) => void; + + interactiveChildren: boolean; + blendMode: number; + roundPixels: boolean; + + setProperties(properties: ParticleContainerProperties): void; + + } + export interface ParticleBuffer { + + gl: WebGLRenderingContext; + vertSize: number; + vertByteSize: number; + size: number; + dynamicProperties: any[]; + staticProperties: any[]; + + staticStride: number; + staticBuffer: any; + staticData: any; + dynamicStride: number; + dynamicBuffer: any; + dynamicData: any; + + initBuffers(): void; + bind(): void; + destroy(): void; + + } + export interface ParticleRenderer { + + } + export interface ParticleShader { + + } + + //renderers + + export interface RendererOptions { + + view?: HTMLCanvasElement; + transparent?: boolean; + antialias?: boolean; + autoResize?: boolean; + resolution?: number; + clearBeforeRendering?: boolean; + preserveDrawingBuffer?: boolean; + forceFXAA?: boolean; + roundPixels?: boolean; + backgroundColor?: number; + + } + export class SystemRenderer extends EventEmitter { + + protected _backgroundColor: number; + protected _backgroundColorRgb: number[]; + protected _backgroundColorString: string; + protected _tempDisplayObjectParent: any; + protected _lastObjectRendered: DisplayObject; + + constructor(system: string, width?: number, height?: number, options?: RendererOptions); + + type: number; + width: number; + height: number; + view: HTMLCanvasElement; + resolution: number; + transparent: boolean; + autoResize: boolean; + blendModes: any; //todo? + preserveDrawingBuffer: boolean; + clearBeforeRender: boolean; + roundPixels: boolean; + backgroundColor: number; + + render(object: DisplayObject): void; + resize(width: number, height: number): void; + destroy(removeView?: boolean): void; + + } + export class CanvasRenderer extends SystemRenderer { + + protected renderDisplayObject(displayObject: DisplayObject, context: CanvasRenderingContext2D): void; + protected _mapBlendModes(): void; + + constructor(width?: number, height?: number, options?: RendererOptions); + + context: CanvasRenderingContext2D; + refresh: boolean; + maskManager: CanvasMaskManager; + roundPixels: boolean; + smoothProperty: string; + + render(object: DisplayObject): void; + resize(w: number, h: number): void; + + } + export class CanvasBuffer { + + protected clear(): void; + + constructor(width: number, height: number); + + canvas: HTMLCanvasElement; + context: CanvasRenderingContext2D; + + width: number; + height: number; + + resize(width: number, height: number): void; + destroy(): void; + + } + export class CanvasGraphics { + + static renderGraphicsMask(graphics: Graphics, context: CanvasRenderingContext2D): void; + static updateGraphicsTint(graphics: Graphics): void; + + static renderGraphics(graphics: Graphics, context: CanvasRenderingContext2D): void; + + } + export class CanvasMaskManager { + + pushMask(maskData: any, renderer: WebGLRenderer | CanvasRenderer): void; + popMask(renderer: WebGLRenderer | CanvasRenderer): void; + destroy(): void; + + } + export class CanvasTinter { + + static getTintedTexture(sprite: DisplayObject, color: number): HTMLCanvasElement; + static tintWithMultiply(texture: Texture, color: number, canvas: HTMLDivElement): void; + static tintWithOverlay(texture: Texture, color: number, canvas: HTMLCanvasElement): void; + static tintWithPerPixel(texture: Texture, color: number, canvas: HTMLCanvasElement): void; + static roundColor(color: number): number; + static cacheStepsPerColorChannel: number; + static convertTintToImage: boolean; + static vanUseMultiply: boolean; + static tintMethod: Function; + + } + export class WebGLRenderer extends SystemRenderer { + + protected _useFXAA: boolean; + protected _FXAAFilter: filters.FXAAFilter; + protected _contextOptions: { + alpha: boolean; + antiAlias: boolean; + premultipliedAlpha: boolean; + stencil: boolean; + preseveDrawingBuffer: boolean; + }; + protected _renderTargetStack: RenderTarget[]; + + protected _initContext(): void; + protected _createContext(): void; + protected handleContextLost: (event: WebGLContextEvent) => void; + protected _mapGlModes(): void; + protected _managedTextures: Texture[]; + + constructor(width?: number, height?: number, options?: RendererOptions); + + drawCount: number; + shaderManager: ShaderManager; + maskManager: MaskManager; + stencilManager: StencilManager; + filterManager: FilterManager; + blendModeManager: BlendModeManager; + currentRenderTarget: RenderTarget; + currentRenderer: ObjectRenderer; + + render(object: DisplayObject): void; + renderDisplayObject(displayObject: DisplayObject, renderTarget: RenderTarget, clear: boolean): void; + setObjectRenderer(objectRenderer: ObjectRenderer): void; + setRenderTarget(renderTarget: RenderTarget): void; + updateTexture(texture: BaseTexture | Texture): BaseTexture | Texture; + destroyTexture(texture: BaseTexture | Texture, _skipRemove?: boolean): void; + + } + export class AbstractFilter { + + protected vertexSrc: string[]; + protected fragmentSrc: string[]; + + constructor(vertexSrc?: string | string[], fragmentSrc?: string | string[], uniforms?: any); + + uniforms: any; + + padding: number; + + getShader(renderer: WebGLRenderer): Shader; + applyFilter(renderer: WebGLRenderer, input: RenderTarget, output: RenderTarget, clear?: boolean): void; + syncUniform(uniform: WebGLUniformLocation): void; + + } + export class SpriteMaskFilter extends AbstractFilter { + + constructor(sprite: Sprite); + + maskSprite: Sprite; + maskMatrix: Matrix; + + applyFilter(renderer: WebGLRenderbuffer, input: RenderTarget, output: RenderTarget): void; + map: Texture; + offset: Point; + + } + export class BlendModeManager extends WebGLManager { + + constructor(renderer: WebGLRenderer); + + setBlendMode(blendMode: number): boolean; + + } + + export class FilterManager extends WebGLManager { + + constructor(renderer: WebGLRenderer); + + filterStack: any[]; + renderer: WebGLRenderer; + texturePool: any[]; + + onContextChange: () => void; + setFilterStack(filterStack: any[]): void; + pushFilter(target: RenderTarget, filters: any[]): void; + popFilter(): AbstractFilter; + getRenderTarget(clear?: boolean): RenderTarget; + protected returnRenderTarget(renderTarget: RenderTarget): void; + applyFilter(shader: Shader | AbstractFilter, inputTarget: RenderTarget, outputTarget: RenderTarget, clear?: boolean): void; + calculateMappedMatrix(filterArea: Rectangle, sprite: Sprite, outputMatrix?: Matrix): Matrix; + capFilterArea(filterArea: Rectangle): void; + resize(width: number, height: number): void; + destroy(): void; + + } + + export class MaskManager extends WebGLManager { + + stencilStack: StencilMaskStack; + reverse: boolean; + count: number; + alphaMaskPool: any[]; + + pushMask(target: RenderTarget, maskData: any): void; + popMask(target: RenderTarget, maskData: any): void; + pushSpriteMask(target: RenderTarget, maskData: any): void; + popSpriteMask(): void; + pushStencilMask(target: RenderTarget, maskData: any): void; + popStencilMask(target: RenderTarget, maskData: any): void; + + } + export class ShaderManager extends WebGLManager { + + protected _currentId: number; + protected currentShader: Shader; + + constructor(renderer: WebGLRenderer); + + maxAttibs: number; + attribState: any[]; + tempAttribState: any[]; + stack: any[]; + + setAttribs(attribs: any[]): void; + setShader(shader: Shader): boolean; + destroy(): void; + + } + export class StencilManager extends WebGLManager { + + constructor(renderer: WebGLRenderer); + + setMaskStack(stencilMaskStack: StencilMaskStack): void; + pushStencil(graphics: Graphics, webGLData: WebGLGraphicsData): void; + bindGraphics(graphics: Graphics, webGLData: WebGLGraphicsData): void; + popStencil(graphics: Graphics, webGLData: WebGLGraphicsData): void; + destroy(): void; + pushMask(maskData: any[]): void; + popMask(maskData: any[]): void; + + } + export class WebGLManager { + + protected onContextChange: () => void; + + constructor(renderer: WebGLRenderer); + + renderer: WebGLRenderer; + + destroy(): void; + + } + export class Shader { + + protected attributes: any; + protected textureCount: number; + protected uniforms: any; + + protected _glCompile(type: any, src: any): Shader; + + constructor(shaderManager: ShaderManager, vertexSrc: string, fragmentSrc: string, uniforms: any, attributes: any); + + uuid: number; + gl: WebGLRenderingContext; + shaderManager: ShaderManager; + program: WebGLProgram; + vertexSrc: string; + fragmentSrc: string; + + init(): void; + cacheUniformLocations(keys: string[]): void; + cacheAttributeLocations(keys: string[]): void; + compile(): WebGLProgram; + syncUniform(uniform: any): void; + syncUniforms(): void; + initSampler2D(uniform: any): void; + destroy(): void; + + } + export class ComplexPrimitiveShader extends Shader { + + constructor(shaderManager: ShaderManager); + + } + export class PrimitiveShader extends Shader { + + constructor(shaderManager: ShaderManager); + + } + export class TextureShader extends Shader { + + constructor(shaderManager: ShaderManager, vertexSrc?: string, fragmentSrc?: string, customUniforms?: any, customAttributes?: any); + + } + export interface StencilMaskStack { + + stencilStack: any[]; + reverse: boolean; + count: number; + + } + export class ObjectRenderer extends WebGLManager { + + start(): void; + stop(): void; + flush(): void; + render(object?: any): void; + + } + export class RenderTarget { + + constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number, resolution: number, root: boolean); + + gl: WebGLRenderingContext; + frameBuffer: WebGLFramebuffer; + texture: Texture; + size: Rectangle; + resolution: number; + projectionMatrix: Matrix; + transform: Matrix; + frame: Rectangle; + stencilBuffer: WebGLRenderbuffer; + stencilMaskStack: StencilMaskStack; + filterStack: any[]; + scaleMode: number; + root: boolean; + + clear(bind?: boolean): void; + attachStencilBuffer(): void; + activate(): void; + calculateProjection(protectionFrame: Matrix): void; + resize(width: number, height: number): void; + destroy(): void; + + } + export interface Quad { + + gl: WebGLRenderingContext; + vertices: number[]; + uvs: number[]; + colors: number[]; + indices: number[]; + vertexBuffer: WebGLBuffer; + indexBuffer: WebGLBuffer; + + map(rect: Rectangle, rect2: Rectangle): void; + upload(): void; + destroy(): void; + + } + + //sprites + + export class Sprite extends Container { + + static fromFrame(frameId: string): Sprite; + static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite; + + protected _texture: Texture; + protected _width: number; + protected _height: number; + protected cachedTint: number; + + protected _onTextureUpdate(): void; + + constructor(texture?: Texture); + + anchor: Point; + tint: number; + blendMode: number; + shader: Shader | AbstractFilter; + texture: Texture; + + width: number; + height: number; + + getBounds(matrix?: Matrix): Rectangle; + getLocalBounds(): Rectangle; + containsPoint(point: Point): boolean; + destroy(destroyTexture?: boolean, destroyBaseTexture?: boolean): void; + + } + export class SpriteRenderer extends ObjectRenderer { + + protected renderBatch(texture: Texture, size: number, startIndex: number): void; + + vertSize: number; + vertByteSize: number; + size: number; + vertices: number[]; + positions: number[]; + colors: number[]; + indices: number[]; + currentBatchSize: number; + sprites: Sprite[]; + shader: Shader | AbstractFilter; + + render(sprite: Sprite): void; + flush(): void; + start(): void; + destroy(): void; + + } + + //text + + export interface TextStyle { + + font?: string; + fill?: string | number; + align?: string; + stroke?: string | number; + strokeThickness?: number; + wordWrap?: boolean; + wordWrapWidth?: number; + lineHeight?: number; + dropShadow?: boolean; + dropShadowColor?: string | number; + dropShadowAngle?: number; + dropShadowDistance?: number; + padding?: number; + textBaseline?: string; + lineJoin?: string; + miterLimit?: number; + + } + export class Text extends Sprite { + + static fontPropertiesCache: any; + static fontPropertiesCanvas: HTMLCanvasElement; + static fontPropertiesContext: CanvasRenderingContext2D; + + protected _text: string; + protected _style: TextStyle; + + protected updateText(): void; + protected updateTexture(): void; + protected determineFontProperties(fontStyle: TextStyle): TextStyle; + protected wordWrap(text: string): boolean; + + constructor(text?: string, style?: TextStyle, resolution?: number); + + canvas: HTMLCanvasElement; + context: CanvasRenderingContext2D; + dirty: boolean; + resolution: number; + text: string; + style: TextStyle; + + width: number; + height: number; + + } + + //textures + + export class BaseTexture extends EventEmitter { + + static fromImage(imageUrl: string, crossorigin?: boolean, scaleMode?: number): BaseTexture; + static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): BaseTexture; + + protected _glTextures: any; + + protected _sourceLoaded(): void; + + constructor(source: HTMLImageElement | HTMLCanvasElement, scaleMode?: number, resolution?: number); + + uuid: number; + resolution: number; + width: number; + height: number; + realWidth: number; + realHeight: number; + scaleMode: number; + hasLoaded: boolean; + isLoading: boolean; + source: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement; + premultipliedAlpha: boolean; + imageUrl: string; + isPowerOfTwo: boolean; + mipmap: boolean; + + update(): void; + loadSource(source: HTMLImageElement | HTMLCanvasElement): void; + destroy(): void; + dispose(): void; + updateSourceImage(newSrc: string): void; + + on(event: 'dispose', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + on(event: 'error', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + on(event: 'loaded', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + on(event: 'update', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + on(event: string, fn: Function, context?: any): EventEmitter; + + once(event: 'dispose', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + once(event: 'error', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + once(event: 'loaded', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + once(event: 'update', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + + } + export class RenderTexture extends Texture { + + protected renderWebGL(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void; + protected renderCanvas(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void; + + constructor(renderer: CanvasRenderer | WebGLRenderer, width?: number, height?: number, scaleMode?: number, resolution?: number); + + width: number; + height: number; + resolution: number; + renderer: CanvasRenderer | WebGLRenderer; + valid: boolean; + + render(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void; + resize(width: number, height: number, updateBase?: boolean): void; + clear(): void; + destroy(): void; + getImage(): HTMLImageElement; + getPixels(): number[]; + getPixel(x: number, y: number): number[]; + getBase64(): string; + getCanvas(): HTMLCanvasElement; + + } + export class Texture extends BaseTexture { + + static fromImage(imageUrl: string, crossOrigin?: boolean, scaleMode?: number): Texture; + static fromFrame(frameId: string): Texture; + static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): Texture; + static fromVideo(video: HTMLVideoElement | string, scaleMode?: number): Texture; + static fromVideoUrl(videoUrl: string, scaleMode?: number): Texture; + static addTextureToCache(texture: Texture, id: string): void; + static removeTextureFromCache(id: string): Texture; + static EMPTY: Texture; + + protected _frame: Rectangle; + protected _uvs: TextureUvs; + + protected onBaseTextureUpdated(baseTexture: BaseTexture): void; + protected onBaseTextureLoaded(baseTexture: BaseTexture): void; + protected _updateUvs(): void; + + constructor(baseTexture: BaseTexture, frame?: Rectangle, crop?: Rectangle, trim?: Rectangle, rotate?: boolean); + + noFrame: boolean; + baseTexture: BaseTexture; + trim: Rectangle; + valid: boolean; + requiresUpdate: boolean; + width: number; + height: number; + crop: Rectangle; + rotate: boolean; + + frame: Rectangle; + + update(): void; + destroy(destroyBase?: boolean): void; + clone(): Texture; + + } + export class TextureUvs { + + x0: number; + y0: number; + x1: number; + y1: number; + x2: number; + y2: number; + x3: number; + y3: number; + + set(frame: Rectangle, baseFrame: Rectangle, rotate: boolean): void; + + } + export class VideoBaseTexture extends BaseTexture { + + static fromVideo(video: HTMLVideoElement, scaleMode?: number): VideoBaseTexture; + static fromUrl(videoSrc: string | any | string[] | any[]): VideoBaseTexture; + + protected _loaded: boolean; + protected _onUpdate(): void; + protected _onPlayStart(): void; + protected _onPlayStop(): void; + protected _onCanPlay(): void; + + constructor(source: HTMLVideoElement, scaleMode?: number); + + autoUpdate: boolean; + + destroy(): void; + + } + + //utils + + export class utils { + + static uuid(): number; + static hex2rgb(hex: number, out?: number[]): number[]; + static hex2string(hex: number): string; + static rgb2hex(rgb: Number[]): number; + static canUseNewCanvasBlendModel(): boolean; + static getNextPowerOfTwo(number: number): number; + static isPowerOfTwo(width: number, height: number): boolean; + static getResolutionOfUrl(url: string): number; + static sayHello(type: string): void; + static isWebGLSupported(): boolean; + static sign(n: number): number; + static TextureCache: any; + static BaseTextureCache: any; + + } + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////EXTRAS//////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module extras { + + export interface BitmapTextStyle { + + font?: string | { + + name?: string; + size?: number; + + }; + align?: string; + tint?: number; + + } + export class BitmapText extends Container { + + static fonts: any; + + protected _glyphs: Sprite[]; + protected _font: string | { + tint: number; + align: string; + name: string; + size: number; + }; + protected _text: string; + + protected updateText(): void; + + constructor(text: string, style?: BitmapTextStyle); + + textWidth: number; + textHeight: number; + maxWidth: number; + maxLineHeight: number; + dirty: boolean; + + tint: number; + align: string; + font: string | { + tint: number; + align: string; + name: string; + size: number; + }; + text: string; + + } + export class MovieClip extends Sprite { + + static fromFrames(frame: string[]): MovieClip; + static fromImages(images: string[]): MovieClip; + + protected _textures: Texture[]; + protected _durations: number[]; + protected _currentTime: number; + + protected update(deltaTime: number): void; + + constructor(textures: Texture[]); + + animationSpeed: number; + loop: boolean; + onComplete: () => void; + currentFrame: number; + playing: boolean; + + totalFrames: number; + textures: Texture[]; + + stop(): void; + play(): void; + gotoAndStop(frameName: number): void; + gotoAndPlay(frameName: number): void; + destroy(): void; + + } + export class TilingSprite extends Sprite { + + //This is really unclean but is the only way :( + //See http://stackoverflow.com/questions/29593905/typescript-declaration-extending-class-with-static-method/29595798#29595798 + //Thanks bas! + static fromFrame(frameId: string): Sprite; + static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite; + + static fromFrame(frameId: string, width?: number, height?: number): TilingSprite; + static fromImage(imageId: string, width?: number, height?: number, crossorigin?: boolean, scaleMode?: number): TilingSprite; + + protected _tileScaleOffset: Point; + protected _tilingTexture: boolean; + protected _refreshTexture: boolean; + protected _uvs: TextureUvs[]; + + constructor(texture: Texture, width: number, height: number); + + tileScale: Point; + tilePosition: Point; + + width: number; + height: number; + originalTexture: Texture; + + getBounds(): Rectangle; + generateTilingTexture(renderer: WebGLRenderer | CanvasRenderer, texture: Texture, forcePowerOfTwo?: boolean): Texture; + containsPoint(point: Point): boolean; + destroy(): void; + + } + + } + + ////////////////////////////////////////////////////////////////////////////// + ///////////////////////////////FILTERS//////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + namespace filters { + + export class AsciiFilter extends AbstractFilter { + size: number; + } + export class BloomFilter extends AbstractFilter { + + blur: number; + blurX: number; + blurY: number; + + } + export class BlurFilter extends AbstractFilter { + + protected blurXFilter: BlurXFilter; + protected blurYFilter: BlurYFilter; + + blur: number; + passes: number; + blurX: number; + blurY: number; + + } + export class BlurXFilter extends AbstractFilter { + + passes: number; + strength: number; + blur: number; + + } + export class BlurYFilter extends AbstractFilter { + + passes: number; + strength: number; + blur: number; + + } + export class SmartBlurFilter extends AbstractFilter { + + } + export class ColorMatrixFilter extends AbstractFilter { + + protected _loadMatrix(matrix: number[], multiply: boolean): void; + protected _multiply(out: number[], a: number[], b: number[]): void; + protected _colorMatrix(matrix: number[]): void; + + matrix: number[]; + + brightness(b: number, multiply?: boolean): void; + greyscale(scale: number, multiply?: boolean): void; + blackAndWhite(multiply?: boolean): void; + hue(rotation: number, multiply?: boolean): void; + contrast(amount: number, multiply?: boolean): void; + saturate(amount: number, multiply?: boolean): void; + desaturate(multiply?: boolean): void; + negative(multiply?: boolean): void; + sepia(multiply?: boolean): void; + technicolor(multiply?: boolean): void; + polaroid(multiply?: boolean): void; + toBGR(multiply?: boolean): void; + kodachrome(multiply?: boolean): void; + browni(multiply?: boolean): void; + vintage(multiply?: boolean): void; + colorTone(desaturation: number, toned: number, lightColor: string, darkColor: string, multiply?: boolean): void; + night(intensity: number, multiply?: boolean): void; + predator(amount: number, multiply?: boolean): void; + lsd(multiply?: boolean): void; + reset(): void; + + } + export class ColorStepFilter extends AbstractFilter { + + step: number; + + } + export class ConvolutionFilter extends AbstractFilter { + + constructor(matrix: number[], width: number, height: number); + + matrix: number[]; + width: number; + height: number; + + } + export class CrossHatchFilter extends AbstractFilter { + + } + export class DisplacementFilter extends AbstractFilter { + + constructor(sprite: Sprite, scale?: number); + + map: Texture; + + scale: Point; + + } + export class DotScreenFilter extends AbstractFilter { + + scale: number; + angle: number; + + } + export class BlurYTintFilter extends AbstractFilter { + + blur: number; + + } + export class DropShadowFilter extends AbstractFilter { + + blur: number; + blurX: number; + blurY: number; + color: number; + alpha: number; + distance: number; + angle: number; + + } + export class GrayFilter extends AbstractFilter { + + gray: number; + + } + export class InvertFilter extends AbstractFilter { + + invert: number; + + } + export class NoiseFilter extends AbstractFilter { + + noise: number; + + } + export class PixelateFilter extends AbstractFilter { + + size: Point; + + } + export class RGBSplitFilter extends AbstractFilter { + + red: number; + green: number; + blue: number; + + } + export class SepiaFilter extends AbstractFilter { + + sepia: number; + + } + export class ShockwaveFilter extends AbstractFilter { + + center: number[]; + params: any; + time: number; + + } + export class TiltShiftAxisFilter extends AbstractFilter { + + blur: number; + gradientBlur: number; + start: number; + end: number; + + updateDelta(): void; + + } + export class TiltShiftFilter extends AbstractFilter { + + blur: number; + gradientBlur: number; + start: number; + end: number; + + } + export class TiltShiftXFilter extends AbstractFilter { + + updateDelta(): void; + + } + export class TiltShiftYFilter extends AbstractFilter { + + updateDelta(): void; + + } + export class TwistFilter extends AbstractFilter { + + offset: Point; + radius: number; + angle: number; + + } + export class FXAAFilter extends AbstractFilter { + + applyFilter(renderer: WebGLRenderer, input: RenderTarget, output: RenderTarget): void; + + } + } + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////INTERACTION/////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module interaction { + + export interface InteractionEvent { + + stopped: boolean; + target: any; + type: string; + data: InteractionData; + stopPropagation(): void; + + } + + export class InteractionData { + + global: Point; + target: DisplayObject; + originalEvent: Event; + identifier: number; + + getLocalPosition(displayObject: DisplayObject, point?: Point, globalPos?: Point): Point; + + } + + export class InteractionManager { + + protected interactionDOMElement: HTMLElement; + protected eventsAdded: boolean; + protected _tempPoint: Point; + + protected setTargetElement(element: HTMLElement, resolution: number): void; + protected addEvents(): void; + protected removeEvents(): void; + protected dispatchEvent(displayObject: DisplayObject, eventString: string, eventData: any): void; + protected onMouseDown: (event: Event) => void; + protected processMouseDown: (displayObject: DisplayObject, hit: boolean) => void; + protected onMouseUp: (event: Event) => void; + protected processMouseUp: (displayObject: DisplayObject, hit: boolean) => void; + protected onMouseMove: (event: Event) => void; + protected processMouseMove: (displayObject: DisplayObject, hit: boolean) => void; + protected onMouseOut: (event: Event) => void; + protected processMouseOverOut: (displayObject: DisplayObject, hit: boolean) => void; + protected onTouchStart: (event: Event) => void; + protected processTouchStart: (DisplayObject: DisplayObject, hit: boolean) => void; + protected onTouchEnd: (event: Event) => void; + protected processTouchEnd: (displayObject: DisplayObject, hit: boolean) => void; + protected onTouchMove: (event: Event) => void; + protected processTouchMove: (displayObject: DisplayObject, hit: boolean) => void; + protected getTouchData(touchEvent: InteractionData): InteractionData; + protected returnTouchData(touchData: InteractionData): void; + + constructor(renderer: CanvasRenderer | WebGLRenderer, options?: { autoPreventDefault?: boolean; interactionFrequence?: number; }); + + renderer: CanvasRenderer | WebGLRenderer; + autoPreventDefault: boolean; + interactionFrequency: number; + mouse: InteractionData; + eventData: { + stopped: boolean; + target: any; + type: any; + data: InteractionData; + }; + interactiveDataPool: InteractionData[]; + last: number; + currentCursorStyle: string; + resolution: number; + update(deltaTime: number): void; + + mapPositionToPoint(point: Point, x: number, y: number): void; + processInteractive(point: Point, displayObject: DisplayObject, func: (displayObject: DisplayObject, hit: boolean) => void, hitTest: boolean, interactive: boolean): boolean; + destroy(): void; + + } + + export interface InteractiveTarget { + + interactive: boolean; + buttonMode: boolean; + interactiveChildren: boolean; + defaultCursor: string; + hitArea: HitArea; + + } + + } + + ////////////////////////////////////////////////////////////////////////////// + ///////////////////////////////LOADER///////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + //https://github.com/englercj/resource-loader/blob/master/src/Loader.js + + export module loaders { + export interface LoaderOptions { + + crossOrigin?: boolean; + loadType?: number; + xhrType?: string; + + } + export interface ResourceDictionary { + + [index: string]: PIXI.loaders.Resource; + } + export class Loader extends EventEmitter { + + constructor(baseUrl?: string, concurrency?: number); + + baseUrl: string; + progress: number; + loading: boolean; + resources: ResourceDictionary; + + add(name: string, url: string, options?: LoaderOptions, cb?: () => void): Loader; + add(url: string, options?: LoaderOptions, cb?: () => void): Loader; + //todo I am not sure of object literal notional (or its options) so just allowing any but would love to improve this + add(obj: any, options?: LoaderOptions, cb?: () => void): Loader; + + on(event: 'complete', fn: (loader: loaders.Loader, object: any) => void, context?: any): EventEmitter; + on(event: 'error', fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + on(event: 'load', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + on(event: 'progress', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + on(event: 'start', fn: (loader: loaders.Loader) => void, context?: any): EventEmitter; + on(event: string, fn: Function, context?: any): EventEmitter; + + once(event: 'complete', fn: (loader: loaders.Loader, object: any) => void, context?: any): EventEmitter; + once(event: 'error', fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + once(event: 'load', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + once(event: 'progress', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + once(event: 'start', fn: (loader: loaders.Loader) => void, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + + before(fn: Function): Loader; + pre(fn: Function): Loader; + + after(fn: Function): Loader; + use(fn: Function): Loader; + + reset(): void; + + load(cb?: (loader: loaders.Loader, object: any) => void): Loader; + + } + export class Resource extends EventEmitter { + + static LOAD_TYPE: { + XHR: number; + IMAGE: number; + AUDIO: number; + VIDEO: number; + }; + + static XHR_READ_STATE: { + UNSENT: number; + OPENED: number; + HEADERS_RECIEVED: number; + LOADING: number; + DONE: number; + }; + + static XHR_RESPONSE_TYPE: { + DEFAULT: number; + BUFFER: number; + BLOB: number; + DOCUMENT: number; + JSON: number; + TEXT: number; + }; + + constructor(name?: string, url?: string | string[], options?: LoaderOptions); + + name: string; + texture: Texture; + textures: Texture[]; + url: string; + data: any; + crossOrigin: string; + loadType: number; + xhrType: string; + error: Error; + xhr: XMLHttpRequest; + + complete(): void; + load(cb?: () => void): void; + + } + } + + ////////////////////////////////////////////////////////////////////////////// + ///////////////////////////////MESH/////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module mesh { + + export class Mesh extends Container { + + static DRAW_MODES: { + TRIANGLE_MESH: number; + TRIANGLES: number; + }; + + constructor(texture: Texture, vertices?: number[], uvs?: number[], indices?: number[], drawMode?: number); + + texture: Texture; + uvs: number[]; + vertices: number[]; + indices: number[]; + dirty: boolean; + blendMode: number; + canvasPadding: number; + drawMode: number; + shader: Shader | AbstractFilter; + + getBounds(matrix?: Matrix): Rectangle; + containsPoint(point: Point): boolean; + + protected _texture: Texture; + + protected _renderCanvasTriangleMesh(context: CanvasRenderingContext2D): void; + protected _renderCanvasTriangles(context: CanvasRenderingContext2D): void; + protected _renderCanvasDrawTriangle(context: CanvasRenderingContext2D, vertices: number, uvs: number, index0: number, index1: number, index2: number): void; + protected renderMeshFlat(Mesh: Mesh): void; + protected _onTextureUpdate(): void; + + } + export class Rope extends Mesh { + + protected _ready: boolean; + + protected getTextureUvs(): TextureUvs; + + constructor(texture: Texture, points: Point[]); + + points: Point[]; + colors: number[]; + + refresh(): void; + + } + export class Plane extends Mesh { + + segmentsX: number; + segmentsY: number; + + constructor(texture: Texture, segmentsX?: number, segmentsY?: number); + + } + + + export class MeshRenderer extends ObjectRenderer { + + protected _initWebGL(mesh: Mesh): void; + + indices: number[]; + + constructor(renderer: WebGLRenderer); + + render(mesh: Mesh): void; + flush(): void; + start(): void; + destroy(): void; + + } + + export interface MeshShader extends Shader { } + + } + + namespace ticker { + + export var shared: Ticker; + + export class Ticker { + + protected _tick(time: number): void; + protected _emitter: EventEmitter; + protected _requestId: number; + protected _maxElapsedMS: number; + + protected _requestIfNeeded(): void; + protected _cancelIfNeeded(): void; + protected _startIfPossible(): void; + + autoStart: boolean; + deltaTime: number; + elapsedMS: number; + lastTime: number; + speed: number; + started: boolean; + + FPS: number; + minFPS: number; + + add(fn: (deltaTime: number) => void, context?: any): Ticker; + addOnce(fn: (deltaTime: number) => void, context?: any): Ticker; + remove(fn: (deltaTime: number) => void, context?: any): Ticker; + start(): void; + stop(): void; + update(): void; + + } + + } +} + +declare module 'pixi.js' { + export = PIXI; +} From dc00c071696663c7ea727089c1885c3e03c1856a Mon Sep 17 00:00:00 2001 From: Ivan Popelyshev Date: Sun, 13 Nov 2016 21:06:58 +0300 Subject: [PATCH 2/2] Fix problems with pixi-spine --- pixi-spine/index.d.ts | 1843 ++++++++++++++++++-------------- pixi-spine/pixi-spine-tests.ts | 24 +- 2 files changed, 1046 insertions(+), 821 deletions(-) diff --git a/pixi-spine/index.d.ts b/pixi-spine/index.d.ts index 77415c00a8..432b9f6129 100644 --- a/pixi-spine/index.d.ts +++ b/pixi-spine/index.d.ts @@ -1,814 +1,1039 @@ -// Type definitions for pixi-spine 1.0.4 -// Project: https://github.com/pixijs/pixi-spine/ -// Definitions by: martijncroezen +// Type definitions for Pixi-spine v1.3, works with pixi.js v4 +// Project: https://github.com/pixijs/pixi-spine/tree/master +// Definitions by: Ivan Popelyshev // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped /// -import * as PIXI from 'pixi.js'; - -declare module 'pixi.js' { - - export module spine { - - export interface Timeline { - - frames: number[]; - - getFrameCount(): number; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - export interface Attachment { - - name: string; - type: number; - - } - - export class Animation { - - constructor(name: string, timelines?: Timeline[], duration?: number); - - apply(skeleton: Skeleton, lastTime: number, time: number, loop?: boolean, events?: Event[]): void; - mix(skeleton: Skeleton, lastTime: number, time: number, loop?: boolean, events?: any[], alpha?: number): void; - binarySearch(values: number[], target: number, step: number): number; - binarySearch1(values: number[], target: number): number; - linearSearch(values: number[], target: number, step: number): number; - - name: string; - timelines: Timeline[]; - duration: number; - - } - - export class AnimationState { - - data: AnimationStateData; - tracks: TrackEntry[]; - events: Event[]; - onStart: (index: number) => void; - onEnd: (trackIndex: number) => void; - onComplete: (i: number, count: number) => void; - onEvent: (i: number, event: Event) => void; - timeScale: number; - - constructor(stateData: AnimationStateData); - - update(delta: number): void; - apply(skeleton: Skeleton): void; - clearTracks(): void; - clearTrack(trackIndex: number): void; - private _expandToIndex(index: number): TrackEntry; - setCurrent(index: number, entry: TrackEntry): void; - setAnimationByName(trackIndex: number, animationName: string, loop: boolean): TrackEntry; - setAnimation(trackIndex: number, animation: Animation, loop: boolean): TrackEntry; - addAnimationByName(trackIndex: number, animationName: string, loop: boolean, delay: number): TrackEntry; - addAnimation(trackIndex: number, animation: Animation, loop: boolean, delay: number): TrackEntry; - getCurrent(trackIndex: number): TrackEntry; - - } - - export class Spine extends PIXI.Container { - - constructor(spineData: any); - - static fromAtlas(resourceName: string): Spine; - - update(dt: number): void; - - private autoUpdateTransform(): void; - private createSprite(slot: Slot, attachment: Attachment): Sprite; - private createMesh(slot, attachment) - - spineData: any; - skeleton: Skeleton; - stateData: AnimationStateData; - state: AnimationState; - slotContainers: PIXI.Container[]; - autoUpdate: boolean; - - } - - export class AnimationStateData { - - constructor(skeletonData: SkeletonData); - - private _skelentonData: SkeletonData; - private animationToMixTime: number; - defaultMix: number; - skeletonData: SkeletonData; - setMixByName(fromName: string, toName: string, duration: number): void; - setMix(from: Animation, to: Animation, duration: number): void; - getMix(from: Animation, to: Animation): number; - - } - - export class AttachmentType { - - static region: number; - static boundingbox: number; - static mesh: number; - static skinnedmesh: number; - - } - - export class Bone { - - data: BoneData; - skeleton: Skeleton; - parent: Bone; - - constructor(boneData: BoneData, skeleton: Skeleton, parent: Bone); - - x: number; - y: number; - rotation: number; - rotationIK: number; - scaleX: number; - scaleY: number; - flipX: boolean; - flipY: boolean; - m00: number; - m01: number; - worldX: number; - m10: number; - m11: number; - worldY: number; - worldRotation: number;; - worldScaleX: number; - worldScaleY: number; - worldFlipX: boolean; - worldFlipY: boolean; - - updateWorldTransform(): void; - setToSetupPose(): void; - worldToLocal(world: number[]): void; - localToWorld(local: number[]): void; - - } - - export class BoneData { - - name: string; - parent: Bone; - - constructor(name: string, parent: Bone); - - length: number; - x: number; - y: number; - rotation: number; - scaleX: number; - scaleY: number; - inheritScale: boolean; - inheritRotation: boolean; - flipX: boolean; - flipY: boolean; - - } - - export class BoundingBoxAttachment implements Attachment { - - constructor(name: string); - - name: string; - vertices: number[]; - type: number; - - computeWorldVertices(x: number, y: number, bone: Bone, worldVertices: number[]): void; - - } - - export class ColorTimeline implements Timeline { - - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - slotIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, r: number, g: number, b: number, a: number): void; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - export class Curves { - - constructor(frameCount: number[]); - - curves: number[]; - - setLinear(frameIndex: number): void; - setStepped(frameIndex: number): void; - setCurve(frameIndex: number, cx1: number, cy1: number, cx2: number, cy2: number): void; - getCurvePercent(frameIndex: number, percent: number): number; - - } - - export class DrawOrderTimeline implements Timeline { - - constructor(frameCount: number); - - frames: number[]; - drawOrders: number[]; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, drawOrder: number[]): void; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - export class Event { - - constructor(data: any); - - data: any; - intValue: number; - floatValue: number; - stringValue: string; - - } - - export class EventData { - - constructor(name: string); - - name: string; - - intValue: number; - floatValue: number; - stringValue: string; - - } - - export class EventTimeline implements Timeline { - - constructor(frameCount: number); - - frames: number[]; - events: Event[]; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, event: Event): void; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - - export class FfdTimeline implements Timeline { - - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - frameVertices: number[]; - slotIndex: number; - attachment: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, vertices: number[]): void; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - export class FlipXTimeline implements Timeline { - - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - boneIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, vertices: number[]): void; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - export class FlipYTimeline implements Timeline { - - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - boneIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, vertices: number[]): void; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - export class IkConstraint { - - constructor(data: IkConstraintData, skeleton: Skeleton); - - data: IkConstraintData; - mix: number; - bendDirection: number; - bones: Bone[]; - target: Bone; - - apply(): void; - apply1(bone: Bone, targetX: number, targetY: number, alpha: number): void; - apply2(parent: Bone, child: Bone, targetX: number, targetY: number, bendDirection: number, alpha: number): void; - - } - - export class IkConstraintData { - - constructor(name: string); - - name: string; - bones: Bone[]; - target: Bone; - bendDirection: number; - mix: number; - - } - - export class IkConstraintTimeline implements Timeline { - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - ikConstraintIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, mix: number, bendDirection: number): void; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - export class MeshAttachment implements Attachment { - - constructor(name: string); - - name: string; - type: number; - vertices: number[]; - uvs: number[] - regionUVs: number[] - triangles: number[] - hullLength: number; - r: number; - g: number; - b: number; - a: number; - path: string; - rendererObject: any; - regionU: number; - regionV: number; - regionU2: number; - regionV2: number; - regionRotate: boolean; - regionOffsetX: number; - regionOffsetY: number; - regionWidth: number; - regionHeight: number; - regionOriginalWidth: number; - regionOriginalHeight: number; - edges: number[]; - width: number; - height: number; - - updateUVs(): void; - computeWorldVertices(x: number, y: number, slot: Slot, worldVertices: number[]): void; - - } - - export class RegionAttachment implements Attachment { - - constructor(name: string); - - name: string; - offset: number[]; - uvs: number[] - type: number; - x: number; - y: number; - rotation: number; - scaleX: number; - scaleY: number; - width: number; - height: number; - r: number; - g: number; - b: number; - a: number; - path: string; - rendererObject: any; - regionOffsetX: number; - regionOffsetY: number; - regionWidth: number; - regionHeight: number; - regionOriginalWidth: number; - regionOriginalHeight: number; - - updateOffset(): void; - setUVs(u: number, v: number, u2: number, v2: number, rotate: number): void; - computeVertices(x: number, y: number, bone: Bone, vertices: number[]): void; - - } - - export class RotateTimeline implements Timeline { - - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - boneIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, mix: number, bendDirection: number): void; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - export class ScaleTimeline implements Timeline { - - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - boneIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, mix: number, bendDirection: number): void; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - export class Skeleton { - - constructor(skeletonData: SkeletonData); - - data: SkeletonData; - bones: Bone[]; - slots: Slot[]; - drawOrder: Slot[]; - ikConstraints: IkConstraint[]; - boneCache: Bone[][]; - x: number; - y: number; - skin: Skin; - r: number; - g: number; - b: number; - a: number; - time: number; - flipX: boolean; - flipY: boolean; - - updateCache(): void; - updateWorldTransform(): void; - setToSetupPose(): void; - setBonesToSetupPose(): void; - setSlotsToSetupPose(): void; - getRootBone(): Bone; - findBone(boneName: string): Bone; - findBoneIndex(boneName: string): number; - findSlot(slotName: string): Slot; - findSlotIndex(slotName: string): number; - setSkinByName(skinName: string): Skin; - setSkin(newSkin: Skin): void; - getAttachmentBySlotName(slotName: string, attachmentName: string): Attachment; - getAttachmentBySlotIndex(slotIndex: number, attachmentName: string): Attachment - setAttachment(slotName: string, attachmentName: string): void; - findIkConstraint(ikConstraintName: string): IkConstraint; - update(delta: number): void; - resetDrawOrder(): void; - - } - - export class SkeletonBounds { - - polygonPool: Polygon[]; - polygons: Polygon[]; - boundingBoxes: BoundingBoxAttachment[]; - minX: number; - minY: number; - maxX: number; - maxY: number; - - update(skeleton: Skeleton, updateAabb: boolean): void; - aabbCompute(): void; - aabbContainsPoint(x: number, y: number): void; - aabbIntersectsSegment(x1: number, y1: number, x2: number, y2: number): boolean; - aabbIntersectsSkeleton(bounds: SkeletonBounds): boolean; - containsPoint(x: number, y: number): BoundingBoxAttachment; - intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment; - polygonContainsPoint(polygon: Polygon, x: number, y: number): boolean; - polygonIntersectsSegment(polygon: Polygon, x1: number, y1: number, x2: number, y2: number): boolean; - getPolygon(attachment: Attachment): Polygon; - getWidth(): number; - getHeight(): number; - - } - - export class SkeletonData { - - bones: Bone[]; - slots: Slot[]; - skins: Skin[]; - events: Event[]; - animations: Animation[]; - ikConstraints: IkConstraint[]; - name: string; - defaultSkin: Skin; - width: number; - height: number; - version: any; - hash: any; - - findBone(boneName: string): Bone; - findBoneIndex(boneName: string): number; - findSlot(slotName: string): Slot; - findSlotIndex(slotName: string): number; - findSkin(skinName: string): Skin; - findEvent(eventName: string): Event; - findAnimation(animationName: string): Animation - findIkConstraint(ikConstraintName: string): IkConstraint; - - } - - export class SkeletonJsonParser { - - constructor(attachmentLoader: any); - - attachmentLoader: any; - scale: number; - - readSkeletonData(root: Bone, name: string): void; - readAttachment(skin: Skin, name: string, map: any): void; - readAnimation(name: string, map: any, skeletonData: SkeletonData): void; - readCurve(timeline: Timeline, frameIndex: number, valueMap: any): void; - toColor(hexString: string, colorIndex: string): number; - getFloatArray(map: any, name: string, scale: number): number[]; - getIntArray(map: any, name: string): number[]; - - } - - export class Skin { - - constructor(name: string); - - name: string; - attachments: Attachment[]; - addAttachment(slotIndex: number, name: string, attachment: Attachment): void; - getAttachment(slotIndex: number, name: string): Attachment; - - protected _attachAll(skeleton: Skeleton, oldSkin: Skin): void; - - } - - export class SkinnedMeshAttachment implements Attachment { - - constructor(name: string); - - name: string; - type: number; - bones: number[]; - weights: number[]; - uvs: number[]; - regionUVs: number[]; - triangles: number[]; - hullLength: number; - r: number; - g: number; - b: number; - a: number; - path: string; - rendererObject: any; - regionU: number; - regionV: number; - regionU2: number; - regionV2: number; - regionRotate: boolean; - regionOffsetX: number; - regionOffsetY: number; - regionWidth: number; - regionHeight: number; - regionOriginalWidth: number; - regionOriginalHeight: number; - edges: number[]; - width: number; - height: number; - - updateUVs(u: number, v: number, u2: number, v2: number, rotate: boolean): void; - computeWorldVertices(x: number, y: number, slot: Slot, worldVertices: number[]): void; - - } - - export class Slot { - - constructor(slotData: SlotData, bone: Bone); - - data: SlotData; - bone: Bone; - r: number; - g: number; - b: number; - a: number; - _attachmentTime: number; - attachment: Attachment; - attachmentVertices: number[]; - setAttachment(attachment: Attachment): void; - setAttachmentTime(time: number): void; - getAttachmentTime(): number; - setToSetupPose(): void; - - } - - export class SlotData { - - constructor(name: string, boneData: BoneData); - - name: string; - boneData: BoneData; - - static PIXI_BLEND_MODE_MAP: { - multiply: number; - screen: number; - additive: number; - normal: number; - }; - r: number; - g: number; - b: number; - a: number; - attachmentName: string; - blendMode: number; - - } - - export class TrackEntry { - - next: TrackEntry; - previous: TrackEntry; - animation: Animation; - loop: boolean; - delay: number; - time: number; - lastTime: number; - endTime: number; - timeScale: number; - mixTime: number; - mixDuration: number; - mix: number; - onStart: (index: number) => void; - onEnd: (trackIndex: number) => void; - onComplete: (i: number, count: number) => void; - onEvent: (i: number, event: Event) => void; - - } - - export class TranslateTimeline implements Timeline { - - constructor(frameCount: number); - - curves: Curves[]; - frames: number[]; - boneIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, x: number, y: number): void; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - export class Atlas { - - constructor(atlasText: string, baseUrl: string, crossOrigin: any); - - pages: AtlasPage[]; - regions: AtlasRegion[]; - texturesLoading: number; - - findRegion(name: string): AtlasRegion; - dispose(): void; - updateUVs(page: AtlasPage): void; - - Format: { - - alpha: number; - intensity: number; - luminanceAlpha: number; - rgb565: number; - rgba4444: number; - rgb888: number; - rgba8888: number; - - }; - - TextureFilter: { - - nearest: number; - linear: number; - mipMap: number; - mipMapNearestNearest: number; - mipMapLinearNearest: number; - mipMapNearestLinear: number; - mipMapLinearLinear: number; - - }; - - TextureWrap: { - - mirroredRepeat: number; - clampToEdge: number; - repeat: number; - - }; - - } - - export class AtlasAttachmentParser { - - constructor(atlas: Atlas); - - newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment; - newMeshAttachment(skin: Skin, name: string, path: string): SkinnedMeshAttachment; - newSkinnedMeshAttachment(skin: Skin, name: string, path: string): SkinnedMeshAttachment; - newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment; - - } - - export class AtlasPage { - name: string; - format: any; - minFilter: any; - magFilter: any; - uWrap: any; - vWrap: any; - rendererObject: any; - width: number; - height: number; - - } - - export class AtlasReader { - constructor(text: string); - - lines: string[]; - index: number; - - trim(value: string): string; - readLine(): string; - readValue(): string; - readTuple(tuple: number): number; - - } - - export class AtlasRegion { - - page: AtlasPage; - name: string; - x: number; - y: number; - width: number; - height: number; - u: number; - v: number; - u2: number; - v2: number; - offsetX: number; - offsetY: number; - originalWidth: number; - originalHeight: number; - index: number; - rotate: boolean; - splits: any; - pads: any; - - - } - - export class AttachmentTimeline implements Timeline { - - constructor(frameCount: number); - - slotIndex: number; - frames: number[]; - attachmentNames: string[]; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, attachmentName: string): void; - apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void; - - } - - export class atlasParser { - - constructor(resource: any, next: any); - - AnimCache: any; - enableCaching: boolean; - - } - +declare module PIXI.spine.core { + class Animation { + name: string; + timelines: Array; + duration: number; + constructor(name: string, timelines: Array, duration: number); + apply(skeleton: Skeleton, lastTime: number, time: number, loop: boolean, events: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + static binarySearch(values: ArrayLike, target: number, step?: number): number; + static linearSearch(values: ArrayLike, target: number, step: number): number; + } + interface Timeline { + apply(skeleton: Skeleton, lastTime: number, time: number, events: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + getPropertyId(): number; + } + enum TimelineType { + rotate = 0, + translate = 1, + scale = 2, + shear = 3, + attachment = 4, + color = 5, + deform = 6, + event = 7, + drawOrder = 8, + ikConstraint = 9, + transformConstraint = 10, + pathConstraintPosition = 11, + pathConstraintSpacing = 12, + pathConstraintMix = 13, + } + abstract class CurveTimeline implements Timeline { + static LINEAR: number; + static STEPPED: number; + static BEZIER: number; + static BEZIER_SIZE: number; + private curves; + abstract getPropertyId(): number; + constructor(frameCount: number); + getFrameCount(): number; + setLinear(frameIndex: number): void; + setStepped(frameIndex: number): void; + getCurveType(frameIndex: number): number; + setCurve(frameIndex: number, cx1: number, cy1: number, cx2: number, cy2: number): void; + getCurvePercent(frameIndex: number, percent: number): number; + abstract apply(skeleton: Skeleton, lastTime: number, time: number, events: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class RotateTimeline extends CurveTimeline { + static ENTRIES: number; + static PREV_TIME: number; + static PREV_ROTATION: number; + static ROTATION: number; + boneIndex: number; + frames: ArrayLike; + constructor(frameCount: number); + getPropertyId(): number; + setFrame(frameIndex: number, time: number, degrees: number): void; + apply(skeleton: Skeleton, lastTime: number, time: number, events: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class TranslateTimeline extends CurveTimeline { + static ENTRIES: number; + static PREV_TIME: number; + static PREV_X: number; + static PREV_Y: number; + static X: number; + static Y: number; + boneIndex: number; + frames: ArrayLike; + constructor(frameCount: number); + getPropertyId(): number; + setFrame(frameIndex: number, time: number, x: number, y: number): void; + apply(skeleton: Skeleton, lastTime: number, time: number, events: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class ScaleTimeline extends TranslateTimeline { + constructor(frameCount: number); + getPropertyId(): number; + apply(skeleton: Skeleton, lastTime: number, time: number, events: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class ShearTimeline extends TranslateTimeline { + constructor(frameCount: number); + getPropertyId(): number; + apply(skeleton: Skeleton, lastTime: number, time: number, events: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class ColorTimeline extends CurveTimeline { + static ENTRIES: number; + static PREV_TIME: number; + static PREV_R: number; + static PREV_G: number; + static PREV_B: number; + static PREV_A: number; + static R: number; + static G: number; + static B: number; + static A: number; + slotIndex: number; + frames: ArrayLike; + constructor(frameCount: number); + getPropertyId(): number; + setFrame(frameIndex: number, time: number, r: number, g: number, b: number, a: number): void; + apply(skeleton: Skeleton, lastTime: number, time: number, events: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class AttachmentTimeline implements Timeline { + slotIndex: number; + frames: ArrayLike; + attachmentNames: Array; + constructor(frameCount: number); + getPropertyId(): number; + getFrameCount(): number; + setFrame(frameIndex: number, time: number, attachmentName: string): void; + apply(skeleton: Skeleton, lastTime: number, time: number, events: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class DeformTimeline extends CurveTimeline { + slotIndex: number; + attachment: VertexAttachment; + frames: ArrayLike; + frameVertices: Array>; + constructor(frameCount: number); + getPropertyId(): number; + setFrame(frameIndex: number, time: number, vertices: ArrayLike): void; + apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class EventTimeline implements Timeline { + frames: ArrayLike; + events: Array; + constructor(frameCount: number); + getPropertyId(): number; + getFrameCount(): number; + setFrame(frameIndex: number, event: Event): void; + apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class DrawOrderTimeline implements Timeline { + frames: ArrayLike; + drawOrders: Array>; + constructor(frameCount: number); + getPropertyId(): number; + getFrameCount(): number; + setFrame(frameIndex: number, time: number, drawOrder: Array): void; + apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class IkConstraintTimeline extends CurveTimeline { + static ENTRIES: number; + static PREV_TIME: number; + static PREV_MIX: number; + static PREV_BEND_DIRECTION: number; + static MIX: number; + static BEND_DIRECTION: number; + ikConstraintIndex: number; + frames: ArrayLike; + constructor(frameCount: number); + getPropertyId(): number; + setFrame(frameIndex: number, time: number, mix: number, bendDirection: number): void; + apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class TransformConstraintTimeline extends CurveTimeline { + static ENTRIES: number; + static PREV_TIME: number; + static PREV_ROTATE: number; + static PREV_TRANSLATE: number; + static PREV_SCALE: number; + static PREV_SHEAR: number; + static ROTATE: number; + static TRANSLATE: number; + static SCALE: number; + static SHEAR: number; + transformConstraintIndex: number; + frames: ArrayLike; + constructor(frameCount: number); + getPropertyId(): number; + setFrame(frameIndex: number, time: number, rotateMix: number, translateMix: number, scaleMix: number, shearMix: number): void; + apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class PathConstraintPositionTimeline extends CurveTimeline { + static ENTRIES: number; + static PREV_TIME: number; + static PREV_VALUE: number; + static VALUE: number; + pathConstraintIndex: number; + frames: ArrayLike; + constructor(frameCount: number); + getPropertyId(): number; + setFrame(frameIndex: number, time: number, value: number): void; + apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class PathConstraintSpacingTimeline extends PathConstraintPositionTimeline { + constructor(frameCount: number); + getPropertyId(): number; + apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } + class PathConstraintMixTimeline extends CurveTimeline { + static ENTRIES: number; + static PREV_TIME: number; + static PREV_ROTATE: number; + static PREV_TRANSLATE: number; + static ROTATE: number; + static TRANSLATE: number; + pathConstraintIndex: number; + frames: ArrayLike; + constructor(frameCount: number); + getPropertyId(): number; + setFrame(frameIndex: number, time: number, rotateMix: number, translateMix: number): void; + apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Array, alpha: number, setupPose: boolean, mixingOut: boolean): void; + } +} +declare module PIXI.spine.core { + class AnimationState { + static emptyAnimation: Animation; + data: AnimationStateData; + tracks: TrackEntry[]; + events: Event[]; + listeners: AnimationStateListener2[]; + queue: EventQueue; + propertyIDs: IntSet; + animationsChanged: boolean; + timeScale: number; + trackEntryPool: Pool; + constructor(data: AnimationStateData); + update(delta: number): void; + updateMixingFrom(entry: TrackEntry, delta: number, canEnd: boolean): void; + apply(skeleton: Skeleton): void; + applyMixingFrom(entry: TrackEntry, skeleton: Skeleton): number; + applyRotateTimeline(timeline: Timeline, skeleton: Skeleton, time: number, alpha: number, setupPose: boolean, timelinesRotation: Array, i: number, firstFrame: boolean): void; + queueEvents(entry: TrackEntry, animationTime: number): void; + clearTracks(): void; + clearTrack(trackIndex: number): void; + setCurrent(index: number, current: TrackEntry): void; + setAnimation(trackIndex: number, animationName: string, loop: boolean): TrackEntry; + setAnimationWith(trackIndex: number, animation: Animation, loop: boolean): TrackEntry; + addAnimation(trackIndex: number, animationName: string, loop: boolean, delay: number): TrackEntry; + addAnimationWith(trackIndex: number, animation: Animation, loop: boolean, delay: number): TrackEntry; + setEmptyAnimation(trackIndex: number, mixDuration: number): TrackEntry; + addEmptyAnimation(trackIndex: number, mixDuration: number, delay: number): TrackEntry; + setEmptyAnimations(mixDuration: number): void; + expandToIndex(index: number): TrackEntry; + trackEntry(trackIndex: number, animation: Animation, loop: boolean, last: TrackEntry): TrackEntry; + disposeNext(entry: TrackEntry): void; + _animationsChanged(): void; + setTimelinesFirst(entry: TrackEntry): void; + checkTimelinesFirst(entry: TrackEntry): void; + checkTimelinesUsage(entry: TrackEntry, usageArray: Array): void; + getCurrent(trackIndex: number): TrackEntry; + addListener(listener: AnimationStateListener2): void; + removeListener(listener: AnimationStateListener2): void; + clearListeners(): void; + clearListenerNotifications(): void; + onComplete: (trackIndex: number, loopCount: number) => any; + onEvent: (trackIndex: number, event: Event) => any; + onStart: (trackIndex: number) => any; + onEnd: (trackIndex: number) => any; + private static deprecatedWarning1; + setAnimationByName(trackIndex: number, animationName: string, loop: boolean): void; + private static deprecatedWarning2; + addAnimationByName(trackIndex: number, animationName: string, loop: boolean, delay: number): void; + private static deprecatedWarning3; + hasAnimationByName(animationName: string): boolean; + } + class TrackEntry { + animation: Animation; + next: TrackEntry; + mixingFrom: TrackEntry; + listener: AnimationStateListener2; + trackIndex: number; + loop: boolean; + eventThreshold: number; + attachmentThreshold: number; + drawOrderThreshold: number; + animationStart: number; + animationEnd: number; + animationLast: number; + nextAnimationLast: number; + delay: number; + trackTime: number; + trackLast: number; + nextTrackLast: number; + trackEnd: number; + timeScale: number; + alpha: number; + mixTime: number; + mixDuration: number; + mixAlpha: number; + timelinesFirst: boolean[]; + timelinesRotation: number[]; + reset(): void; + getAnimationTime(): number; + setAnimationLast(animationLast: number): void; + isComplete(): boolean; + resetRotationDirections(): void; + onComplete: (trackIndex: number, loopCount: number) => any; + onEvent: (trackIndex: number, event: Event) => any; + onStart: (trackIndex: number) => any; + onEnd: (trackIndex: number) => any; + private static deprecatedWarning1; + private static deprecatedWarning2; + time: number; + endTime: number; + loopsCount(): number; + } + class EventQueue { + objects: Array; + drainDisabled: boolean; + animState: AnimationState; + constructor(animState: AnimationState); + start(entry: TrackEntry): void; + interrupt(entry: TrackEntry): void; + end(entry: TrackEntry): void; + dispose(entry: TrackEntry): void; + complete(entry: TrackEntry): void; + event(entry: TrackEntry, event: Event): void; + private static deprecatedWarning1; + deprecateStuff(): boolean; + drain(): void; + clear(): void; + } + enum EventType { + start = 0, + interrupt = 1, + end = 2, + dispose = 3, + complete = 4, + event = 5, + } + interface AnimationStateListener2 { + start(entry: TrackEntry): void; + interrupt(entry: TrackEntry): void; + end(entry: TrackEntry): void; + dispose(entry: TrackEntry): void; + complete(entry: TrackEntry): void; + event(entry: TrackEntry, event: Event): void; + } + abstract class AnimationStateAdapter2 implements AnimationStateListener2 { + start(entry: TrackEntry): void; + interrupt(entry: TrackEntry): void; + end(entry: TrackEntry): void; + dispose(entry: TrackEntry): void; + complete(entry: TrackEntry): void; + event(entry: TrackEntry, event: Event): void; + } +} +declare module PIXI.spine.core { + class AnimationStateData { + skeletonData: SkeletonData; + animationToMixTime: Map; + defaultMix: number; + constructor(skeletonData: SkeletonData); + setMix(fromName: string, toName: string, duration: number): void; + private static deprecatedWarning1; + setMixByName(fromName: string, toName: string, duration: number): void; + setMixWith(from: Animation, to: Animation, duration: number): void; + getMix(from: Animation, to: Animation): number; + } +} +declare module PIXI.spine.core { + class AtlasAttachmentLoader implements AttachmentLoader { + atlas: TextureAtlas; + constructor(atlas: TextureAtlas); + newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment; + newMeshAttachment(skin: Skin, name: string, path: string): MeshAttachment; + newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment; + newPathAttachment(skin: Skin, name: string): PathAttachment; + } +} +declare module PIXI.spine.core { + abstract class Attachment { + name: string; + constructor(name: string); + } + abstract class VertexAttachment extends Attachment { + bones: Array; + vertices: ArrayLike; + worldVerticesLength: number; + constructor(name: string); + computeWorldVertices(slot: Slot, worldVertices: ArrayLike): void; + computeWorldVerticesWith(slot: Slot, start: number, count: number, worldVertices: ArrayLike, offset: number): void; + applyDeform(sourceAttachment: VertexAttachment): boolean; + } +} +declare module PIXI.spine.core { + interface AttachmentLoader { + newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment; + newMeshAttachment(skin: Skin, name: string, path: string): MeshAttachment; + newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment; + newPathAttachment(skin: Skin, name: string): PathAttachment; + } +} +declare module PIXI.spine.core { + enum AttachmentType { + Region = 0, + BoundingBox = 1, + Mesh = 2, + LinkedMesh = 3, + Path = 4, + } +} +declare module PIXI.spine.core { + class BoundingBoxAttachment extends VertexAttachment { + color: Color; + constructor(name: string); + } +} +declare module PIXI.spine.core { + class MeshAttachment extends VertexAttachment { + region: TextureRegion; + path: string; + regionUVs: ArrayLike; + triangles: Array; + color: Color; + hullLength: number; + private parentMesh; + inheritDeform: boolean; + tempColor: Color; + constructor(name: string); + updateWorldVertices(slot: Slot, premultipliedAlpha: boolean): ArrayLike; + updateUVs(region: TextureRegion, uvs: ArrayLike): ArrayLike; + applyDeform(sourceAttachment: VertexAttachment): boolean; + getParentMesh(): MeshAttachment; + setParentMesh(parentMesh: MeshAttachment): void; + } +} +declare module PIXI.spine.core { + class PathAttachment extends VertexAttachment { + lengths: Array; + closed: boolean; + constantSpeed: boolean; + color: Color; + constructor(name: string); + } +} +declare module PIXI.spine.core { + class RegionAttachment extends Attachment { + x: number; + y: number; + scaleX: number; + scaleY: number; + rotation: number; + width: number; + height: number; + color: Color; + path: string; + region: TextureRegion; + constructor(name: string); + updateWorldVertices(slot: Slot, premultipliedAlpha: boolean): ArrayLike; + } +} +declare module PIXI.spine.core { + enum BlendMode { + Normal = 0, + Additive = 1, + Multiply = 2, + Screen = 3, + } +} +declare module PIXI.spine.core { + class Bone implements Updatable { + static yDown: boolean; + matrix: Matrix; + readonly worldX: number; + readonly worldY: number; + data: BoneData; + skeleton: Skeleton; + parent: Bone; + children: Bone[]; + x: number; + y: number; + rotation: number; + scaleX: number; + scaleY: number; + shearX: number; + shearY: number; + ax: number; + ay: number; + arotation: number; + ascaleX: number; + ascaleY: number; + ashearX: number; + ashearY: number; + appliedValid: boolean; + sorted: boolean; + constructor(data: BoneData, skeleton: Skeleton, parent: Bone); + update(): void; + updateWorldTransform(): void; + updateWorldTransformWith(x: number, y: number, rotation: number, scaleX: number, scaleY: number, shearX: number, shearY: number): void; + setToSetupPose(): void; + getWorldRotationX(): number; + getWorldRotationY(): number; + getWorldScaleX(): number; + getWorldScaleY(): number; + worldToLocalRotationX(): number; + worldToLocalRotationY(): number; + rotateWorld(degrees: number): void; + updateAppliedTransform(): void; + worldToLocal(world: Vector2): Vector2; + localToWorld(local: Vector2): Vector2; + } +} +declare module PIXI.spine.core { + class BoneData { + index: number; + name: string; + parent: BoneData; + length: number; + x: number; + y: number; + rotation: number; + scaleX: number; + scaleY: number; + shearX: number; + shearY: number; + transformMode: TransformMode; + constructor(index: number, name: string, parent: BoneData); + } + enum TransformMode { + Normal = 0, + OnlyTranslation = 1, + NoRotationOrReflection = 2, + NoScale = 3, + NoScaleOrReflection = 4, + } +} +declare module PIXI.spine.core { + interface Constraint extends Updatable { + getOrder(): number; + } +} +declare module PIXI.spine.core { + class Event { + data: EventData; + intValue: number; + floatValue: number; + stringValue: string; + time: number; + constructor(time: number, data: EventData); + } +} +declare module PIXI.spine.core { + class EventData { + name: string; + intValue: number; + floatValue: number; + stringValue: string; + constructor(name: string); + } +} +declare module PIXI.spine.core { + class IkConstraint implements Constraint { + data: IkConstraintData; + bones: Array; + target: Bone; + mix: number; + bendDirection: number; + level: number; + constructor(data: IkConstraintData, skeleton: Skeleton); + getOrder(): number; + apply(): void; + update(): void; + apply1(bone: Bone, targetX: number, targetY: number, alpha: number): void; + apply2(parent: Bone, child: Bone, targetX: number, targetY: number, bendDir: number, alpha: number): void; + } +} +declare module PIXI.spine.core { + class IkConstraintData { + name: string; + order: number; + bones: BoneData[]; + target: BoneData; + bendDirection: number; + mix: number; + constructor(name: string); + } +} +declare module PIXI.spine.core { + class PathConstraint implements Constraint { + static NONE: number; + static BEFORE: number; + static AFTER: number; + data: PathConstraintData; + bones: Array; + target: Slot; + position: number; + spacing: number; + rotateMix: number; + translateMix: number; + spaces: number[]; + positions: number[]; + world: number[]; + curves: number[]; + lengths: number[]; + segments: number[]; + constructor(data: PathConstraintData, skeleton: Skeleton); + apply(): void; + update(): void; + computeWorldPositions(path: PathAttachment, spacesCount: number, tangents: boolean, percentPosition: boolean, percentSpacing: boolean): number[]; + addBeforePosition(p: number, temp: Array, i: number, out: Array, o: number): void; + addAfterPosition(p: number, temp: Array, i: number, out: Array, o: number): void; + addCurvePosition(p: number, x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, out: Array, o: number, tangents: boolean): void; + getOrder(): number; + } +} +declare module PIXI.spine.core { + class PathConstraintData { + name: string; + order: number; + bones: BoneData[]; + target: SlotData; + positionMode: PositionMode; + spacingMode: SpacingMode; + rotateMode: RotateMode; + offsetRotation: number; + position: number; + spacing: number; + rotateMix: number; + translateMix: number; + constructor(name: string); + } + enum PositionMode { + Fixed = 0, + Percent = 1, + } + enum SpacingMode { + Length = 0, + Fixed = 1, + Percent = 2, + } + enum RotateMode { + Tangent = 0, + Chain = 1, + ChainScale = 2, + } +} +declare module PIXI.spine.core { + class Skeleton { + data: SkeletonData; + bones: Array; + slots: Array; + drawOrder: Array; + ikConstraints: Array; + transformConstraints: Array; + pathConstraints: Array; + _updateCache: Updatable[]; + updateCacheReset: Updatable[]; + skin: Skin; + color: Color; + time: number; + flipX: boolean; + flipY: boolean; + x: number; + y: number; + constructor(data: SkeletonData); + updateCache(): void; + sortIkConstraint(constraint: IkConstraint): void; + sortPathConstraint(constraint: PathConstraint): void; + sortTransformConstraint(constraint: TransformConstraint): void; + sortPathConstraintAttachment(skin: Skin, slotIndex: number, slotBone: Bone): void; + sortPathConstraintAttachmentWith(attachment: Attachment, slotBone: Bone): void; + sortBone(bone: Bone): void; + sortReset(bones: Array): void; + updateWorldTransform(): void; + setToSetupPose(): void; + setBonesToSetupPose(): void; + setSlotsToSetupPose(): void; + getRootBone(): Bone; + findBone(boneName: string): Bone; + findBoneIndex(boneName: string): number; + findSlot(slotName: string): Slot; + findSlotIndex(slotName: string): number; + setSkinByName(skinName: string): void; + setSkin(newSkin: Skin): void; + getAttachmentByName(slotName: string, attachmentName: string): Attachment; + getAttachment(slotIndex: number, attachmentName: string): Attachment; + setAttachment(slotName: string, attachmentName: string): void; + findIkConstraint(constraintName: string): IkConstraint; + findTransformConstraint(constraintName: string): TransformConstraint; + findPathConstraint(constraintName: string): PathConstraint; + getBounds(offset: Vector2, size: Vector2): void; + update(delta: number): void; + } +} +declare module PIXI.spine.core { + class SkeletonBounds { + minX: number; + minY: number; + maxX: number; + maxY: number; + boundingBoxes: BoundingBoxAttachment[]; + polygons: ArrayLike[]; + private polygonPool; + update(skeleton: Skeleton, updateAabb: boolean): void; + aabbCompute(): void; + aabbContainsPoint(x: number, y: number): boolean; + aabbIntersectsSegment(x1: number, y1: number, x2: number, y2: number): boolean; + aabbIntersectsSkeleton(bounds: SkeletonBounds): boolean; + containsPoint(x: number, y: number): BoundingBoxAttachment; + containsPointPolygon(polygon: ArrayLike, x: number, y: number): boolean; + intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment; + intersectsSegmentPolygon(polygon: ArrayLike, x1: number, y1: number, x2: number, y2: number): boolean; + getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike; + getWidth(): number; + getHeight(): number; + } +} +declare module PIXI.spine.core { + class SkeletonData { + name: string; + bones: BoneData[]; + slots: SlotData[]; + skins: Skin[]; + defaultSkin: Skin; + events: EventData[]; + animations: Animation[]; + ikConstraints: IkConstraintData[]; + transformConstraints: TransformConstraintData[]; + pathConstraints: PathConstraintData[]; + width: number; + height: number; + version: string; + hash: string; + fps: number; + imagesPath: string; + findBone(boneName: string): BoneData; + findBoneIndex(boneName: string): number; + findSlot(slotName: string): SlotData; + findSlotIndex(slotName: string): number; + findSkin(skinName: string): Skin; + findEvent(eventDataName: string): EventData; + findAnimation(animationName: string): Animation; + findIkConstraint(constraintName: string): IkConstraintData; + findTransformConstraint(constraintName: string): TransformConstraintData; + findPathConstraint(constraintName: string): PathConstraintData; + findPathConstraintIndex(pathConstraintName: string): number; + } +} +declare module PIXI.spine.core { + class SkeletonJson { + attachmentLoader: AttachmentLoader; + scale: number; + private linkedMeshes; + constructor(attachmentLoader: AttachmentLoader); + readSkeletonData(json: string | any): SkeletonData; + readAttachment(map: any, skin: Skin, slotIndex: number, name: string): Attachment; + readVertices(map: any, attachment: VertexAttachment, verticesLength: number): void; + readAnimation(map: any, name: string, skeletonData: SkeletonData): void; + readCurve(map: any, timeline: CurveTimeline, frameIndex: number): void; + getValue(map: any, prop: string, defaultValue: any): any; + static blendModeFromString(str: string): number; + static positionModeFromString(str: string): PositionMode; + static spacingModeFromString(str: string): SpacingMode; + static rotateModeFromString(str: string): RotateMode; + static transformModeFromString(str: string): TransformMode; + static transformModeLegacy(inheritRotation: boolean, inheritScale: boolean): TransformMode; + } +} +declare module PIXI.spine.core { + class Skin { + name: string; + attachments: Map[]; + constructor(name: string); + addAttachment(slotIndex: number, name: string, attachment: Attachment): void; + getAttachment(slotIndex: number, name: string): Attachment; + attachAll(skeleton: Skeleton, oldSkin: Skin): void; + } +} +declare module PIXI.spine.core { + class Slot { + currentMesh: any; + currentSprite: any; + meshes: any; + currentMeshName: String; + sprites: any; + currentSpriteName: String; + blendMode: number; + tempRegion: TextureRegion; + tempAttachment: Attachment; + data: SlotData; + bone: Bone; + color: Color; + attachment: Attachment; + private attachmentTime; + attachmentVertices: number[]; + constructor(data: SlotData, bone: Bone); + getAttachment(): Attachment; + setAttachment(attachment: Attachment): void; + setAttachmentTime(time: number): void; + getAttachmentTime(): number; + setToSetupPose(): void; + } +} +declare module PIXI.spine.core { + class SlotData { + index: number; + name: string; + boneData: BoneData; + color: Color; + attachmentName: string; + blendMode: number; + constructor(index: number, name: string, boneData: BoneData); + } +} +declare module PIXI.spine.core { + abstract class Texture { + protected _image: HTMLImageElement; + constructor(image: HTMLImageElement); + getImage(): HTMLImageElement; + abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void; + abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void; + abstract dispose(): void; + static filterFromString(text: string): TextureFilter; + static wrapFromString(text: string): TextureWrap; + } + enum TextureFilter { + Nearest = 9728, + Linear = 9729, + MipMap = 9987, + MipMapNearestNearest = 9984, + MipMapLinearNearest = 9985, + MipMapNearestLinear = 9986, + MipMapLinearLinear = 9987, + } + enum TextureWrap { + MirroredRepeat = 33648, + ClampToEdge = 33071, + Repeat = 10497, + } + class TextureRegion { + texture: PIXI.Texture; + size: PIXI.Rectangle; + readonly width: number; + readonly height: number; + readonly u: number; + readonly v: number; + readonly u2: number; + readonly v2: number; + readonly offsetX: number; + readonly offsetY: number; + readonly pixiOffsetY: number; + readonly spineOffsetY: number; + readonly originalWidth: number; + readonly originalHeight: number; + readonly x: number; + readonly y: number; + readonly rotate: boolean; + } +} +declare module PIXI.spine.core { + class TextureAtlas implements Disposable { + pages: TextureAtlasPage[]; + regions: TextureAtlasRegion[]; + constructor(atlasText: string, textureLoader: (path: string, loaderFunction: (tex: PIXI.BaseTexture) => any) => any, callback: (obj: TextureAtlas) => any); + addTexture(name: string, texture: PIXI.Texture): TextureAtlasRegion; + addTextureHash(textures: Map, stripExtension: boolean): void; + addSpineAtlas(atlasText: string, textureLoader: (path: string, loaderFunction: (tex: PIXI.BaseTexture) => any) => any, callback: (obj: TextureAtlas) => any): void; + private load(atlasText, textureLoader, callback); + findRegion(name: string): TextureAtlasRegion; + dispose(): void; + } + class TextureAtlasPage { + name: string; + minFilter: TextureFilter; + magFilter: TextureFilter; + uWrap: TextureWrap; + vWrap: TextureWrap; + baseTexture: PIXI.BaseTexture; + width: number; + height: number; + setFilters(): void; + } + class TextureAtlasRegion extends TextureRegion { + page: TextureAtlasPage; + name: string; + index: number; + } +} +declare module PIXI.spine.core { + class TransformConstraint implements Constraint { + data: TransformConstraintData; + bones: Array; + target: Bone; + rotateMix: number; + translateMix: number; + scaleMix: number; + shearMix: number; + temp: Vector2; + constructor(data: TransformConstraintData, skeleton: Skeleton); + apply(): void; + update(): void; + getOrder(): number; + } +} +declare module PIXI.spine.core { + class TransformConstraintData { + name: string; + order: number; + bones: BoneData[]; + target: BoneData; + rotateMix: number; + translateMix: number; + scaleMix: number; + shearMix: number; + offsetRotation: number; + offsetX: number; + offsetY: number; + offsetScaleX: number; + offsetScaleY: number; + offsetShearY: number; + constructor(name: string); + } +} +declare module PIXI.spine.core { + interface Updatable { + update(): void; + } +} +declare module PIXI.spine.core { + interface Map { + [key: string]: T; + } + class IntSet { + array: number[]; + add(value: number): boolean; + contains(value: number): boolean; + remove(value: number): void; + clear(): void; + } + interface Disposable { + dispose(): void; + } + class Color { + r: number; + g: number; + b: number; + a: number; + static WHITE: Color; + static RED: Color; + static GREEN: Color; + static BLUE: Color; + static MAGENTA: Color; + constructor(r?: number, g?: number, b?: number, a?: number); + set(r: number, g: number, b: number, a: number): this; + setFromColor(c: Color): this; + setFromString(hex: string): this; + add(r: number, g: number, b: number, a: number): this; + clamp(): this; + } + class MathUtils { + static PI: number; + static PI2: number; + static radiansToDegrees: number; + static radDeg: number; + static degreesToRadians: number; + static degRad: number; + static clamp(value: number, min: number, max: number): number; + static cosDeg(degrees: number): number; + static sinDeg(degrees: number): number; + static signum(value: number): number; + static toInt(x: number): number; + static cbrt(x: number): number; + } + class Utils { + static SUPPORTS_TYPED_ARRAYS: boolean; + static arrayCopy(source: ArrayLike, sourceStart: number, dest: ArrayLike, destStart: number, numElements: number): void; + static setArraySize(array: Array, size: number, value?: any): Array; + static ensureArrayCapacity(array: Array, size: number, value?: any): Array; + static newArray(size: number, defaultValue: T): Array; + static newFloatArray(size: number): ArrayLike; + static toFloatArray(array: Array): number[] | Float32Array; + } + class DebugUtils { + static logBones(skeleton: Skeleton): void; + } + class Pool { + private items; + private instantiator; + constructor(instantiator: () => T); + obtain(): T; + free(item: T): void; + freeAll(items: ArrayLike): void; + clear(): void; + } + class Vector2 { + x: number; + y: number; + constructor(x?: number, y?: number); + set(x: number, y: number): Vector2; + length(): number; + normalize(): this; + } + class TimeKeeper { + maxDelta: number; + framesPerSecond: number; + delta: number; + totalTime: number; + private lastTime; + private frameCount; + private frameTime; + update(): void; + } + interface ArrayLike { + length: number; + [n: number]: T; + } +} +declare module PIXI.spine { + function atlasParser(): (resource: loaders.Resource, next: () => any) => any; + function imageLoaderAdapter(loader: any, namePrefix: any, baseUrl: any, imageOptions: any): (line: String, callback: (baseTexture: BaseTexture) => any) => void; + function syncImageLoaderAdapter(baseUrl: any, crossOrigin: any): (line: any, callback: any) => void; +} +declare module PIXI.spine { + class SpineSprite extends PIXI.Sprite { + region: core.TextureRegion; + constructor(tex: PIXI.Texture); + } + class SpineMesh extends PIXI.mesh.Mesh { + region: core.TextureRegion; + constructor(texture: PIXI.Texture, vertices?: Float32Array, uvs?: Float32Array, indices?: Uint16Array, drawMode?: number); + } + class Spine extends PIXI.Container { + static globalAutoUpdate: boolean; + tintRgb: ArrayLike; + spineData: core.SkeletonData; + skeleton: core.Skeleton; + stateData: core.AnimationStateData; + state: core.AnimationState; + slotContainers: Array; + constructor(spineData: core.SkeletonData); + autoUpdate: boolean; + tint: number; + update(dt: number): void; + private setSpriteRegion(attachment, sprite, region); + private setMeshRegion(attachment, mesh, region); + protected lastTime: number; + autoUpdateTransform(): void; + createSprite(slot: core.Slot, attachment: core.RegionAttachment, defName: string): SpineSprite; + createMesh(slot: core.Slot, attachment: core.MeshAttachment): SpineMesh; + hackTextureBySlotIndex(slotIndex: number, texture?: PIXI.Texture, size?: PIXI.Rectangle): boolean; + hackTextureBySlotName: (slotName: String, texture?: Texture, size?: Rectangle) => any; } - } diff --git a/pixi-spine/pixi-spine-tests.ts b/pixi-spine/pixi-spine-tests.ts index 473e49ae29..55478c3392 100644 --- a/pixi-spine/pixi-spine-tests.ts +++ b/pixi-spine/pixi-spine-tests.ts @@ -1,5 +1,5 @@ /// - +/// namespace Spine { @@ -48,7 +48,7 @@ namespace Spine { this.stage.addChild(dragonCage); // once position and scaled, set the animation to play - this.dragon.state.setAnimationByName(0, 'flying', true); + this.dragon.state.setAnimation(0, 'flying', true); this.animate(); @@ -186,10 +186,10 @@ namespace Spine { this.stage.addChild(this.pixie); - this.pixie.stateData.setMixByName('running', 'jump', 0.2); - this.pixie.stateData.setMixByName('jump', 'running', 0.4); + this.pixie.stateData.setMix('running', 'jump', 0.2); + this.pixie.stateData.setMix('jump', 'running', 0.4); - this.pixie.state.setAnimationByName(0, 'running', true); + this.pixie.state.setAnimation(0, 'running', true); this.stage.on('mousedown', this.onTouchStart); this.stage.on('touchstart', this.onTouchStart); @@ -200,8 +200,8 @@ namespace Spine { private onTouchStart = (): void => { - this.pixie.state.setAnimationByName(0, 'jump', false); - this.pixie.state.addAnimationByName(0, 'running', true, 0); + this.pixie.state.setAnimation(0, 'jump', false); + this.pixie.state.addAnimation(0, 'running', true, 0); } @@ -277,19 +277,19 @@ namespace Spine { this.spineboy.scale.set(1.5); // set up the mixes! - this.spineboy.stateData.setMixByName('walk', 'jump', 0.2); - this.spineboy.stateData.setMixByName('jump', 'walk', 0.4); + this.spineboy.stateData.setMix('walk', 'jump', 0.2); + this.spineboy.stateData.setMix('jump', 'walk', 0.4); // play animation - this.spineboy.state.setAnimationByName(0, 'walk', true); + this.spineboy.state.setAnimation(0, 'walk', true); this.stage.addChild(this.spineboy); this.stage.on('click', () => { - this.spineboy.state.setAnimationByName(0, 'jump', false); - this.spineboy.state.addAnimationByName(0, 'walk', true, 0); + this.spineboy.state.setAnimation(0, 'jump', false); + this.spineboy.state.addAnimation(0, 'walk', true, 0); });