├── .gitignore
├── .editorconfig
├── README.md
├── package.json
├── pixi-extra-filters.d.ts
├── pixi-spine-tests.ts
├── pixi-spine.d.ts
├── pixi.js.d.ts
└── pixi.js-tests.ts


/.gitignore:
--------------------------------------------------------------------------------
 1 | # sublime text files
 2 | *.sublime*
 3 | *.*~*.TMP
 4 | 
 5 | # temp files
 6 | .DS_Store
 7 | Thumbs.db
 8 | Desktop.ini
 9 | npm-debug.log
10 | 
11 | # project files
12 | .project
13 | 
14 | # vim swap files
15 | *.sw*
16 | 
17 | # emacs temp files
18 | *~
19 | \#*#
20 | 
21 | # project ignores
22 | !.gitkeep
23 | *__temp
24 | node_modules
25 | *-tests.js
26 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # This file is for unifying the coding style for different editors and IDEs.
 2 | # More information at http://EditorConfig.org
 3 | root = true
 4 | 
 5 | [*]
 6 | end_of_line = lf
 7 | insert_final_newline = true
 8 | trim_trailing_whitespace = true
 9 | indent_style = space
10 | indent_size = 4
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 
15 | [{package.json,bower.json,.travis.yml}]
16 | indent_size = 2
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Typescript Definitions for Pixi.js ##
 2 | 
 3 | This definition file attempts to follow the [development branch of pixi](https://github.com/GoodBoyDigital/pixi.js/tree/dev) 
 4 | 
 5 | The pixi.js-tests.ts attempts to keep up with the [latest examples](https://github.com/pixijs/examples)
 6 | 
 7 | Any advice, suggestions or improvements would be appreciated. 
 8 | 
 9 | Installation via [tsd](https://github.com/DefinitelyTyped/tsd)
10 | 
11 | ```sh
12 | npm install -g tsd
13 | tsd install pixi.js
14 | ```


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pixi-typescript",
 3 |   "version": "1.0.0",
 4 |   "description": "Typescript definitions for pixi.js",
 5 |   "main": "pixi.js.d.ts",
 6 |   "author": "Chad Engler <chad@pantherdev.com>",
 7 |   "license": "MIT",
 8 |   "bugs": {
 9 |     "url": "https://github.com/pixijs/pixi-typescript/issues"
10 |   },
11 |   "homepage": "https://github.com/pixijs/pixi-typescript",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/pixijs/pixi-typescript.git"
15 |   },
16 |   "keywords": [
17 |     "pixi",
18 |     "typescript",
19 |     "ts"
20 |   ],
21 |   "devDependencies": {
22 |     "definition-tester": "^0.2.0",
23 |     "typescript": "^1.5.3"
24 |   },
25 |   "scripts": {
26 |     "test": "node ./node_modules/.bin/dt"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/pixi-extra-filters.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference path="pixi.js.d.ts" />
 2 | 
 3 | /**
 4 |  * Support for the community filters not found in the core 
 5 |  * Commit History Review 10/Aug
 6 |  *
 7 |  * https://github.com/pixijs/pixi-extra-filters
 8 |  *
 9 |  */
10 | declare module PIXI {
11 | 
12 |     export module filters {
13 | 
14 |         export class BulgePinchFilters extends PIXI.AbstractFilter {
15 | 
16 |             radius: number;
17 |             strength: number;
18 |             center: PIXI.Point;
19 | 
20 |         }
21 | 
22 |         export class ColorReplaceFilter extends PIXI.AbstractFilter {
23 | 
24 |             constructor(originalColor: number[], newColor: number[], epsilon?: number);
25 | 
26 |             originalColor: number[];
27 |             newColor: number[];
28 |             epsilon: number;
29 | 
30 |         }
31 | 
32 |         export class GlowFilter extends PIXI.AbstractFilter {
33 | 
34 |             color: number;
35 |             outerStrength: number;
36 |             innerStrength: number;
37 |             viewWidth: number;
38 |             viewHeight: number;
39 | 
40 |             constructor(viewWidth: number, viewHeight: number, distance: number, outerStrength: number, innerStrength: number, color: number, quality: number);
41 | 
42 |         }
43 | 
44 |         export class OutlineFilter extends PIXI.AbstractFilter {
45 | 
46 |             color: number;
47 |             viewWidth: number;
48 |             viewHeight: number;
49 | 
50 |             constructor(viewWidth: number, viewHeight: number, thickness: number, color: number);
51 | 
52 |         }
53 | 
54 |     }
55 | 
56 | }


--------------------------------------------------------------------------------
/pixi-spine-tests.ts:
--------------------------------------------------------------------------------
  1 | /// <reference path="pixi.js.d.ts" />
  2 | /// <reference path="pixi-spine.d.ts" />
  3 | module Spine {
  4 | 
  5 |     export class Dragon {
  6 | 
  7 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
  8 | 
  9 |         private stage: PIXI.Container;
 10 | 
 11 |         private dragon: PIXI.spine.Spine;
 12 | 
 13 |         constructor() {
 14 | 
 15 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 16 |             document.body.appendChild(this.renderer.view);
 17 | 
 18 |             // create the root of the scene graph
 19 |             this.stage = new PIXI.Container();
 20 | 
 21 |             PIXI.loader.add('dragon', '../../_assets/spine/dragon.json').load(this.onAssetsLoaded);
 22 | 
 23 |         }
 24 | 
 25 |         private onAssetsLoaded = (loader: PIXI.loaders.Loader, res: any): void => {
 26 | 
 27 |             //initiate the spine animation
 28 |             this.dragon = new PIXI.spine.Spine(res.dragon.spineData);
 29 |             this.dragon.skeleton.setToSetupPose();
 30 |             this.dragon.update(0);
 31 |             this.dragon.autoUpdate = false;
 32 | 
 33 |             //create a container for the spin animation and add the animation to it
 34 |             var dragonCage: PIXI.Container = new PIXI.Container();
 35 |             dragonCage.addChild(this.dragon);
 36 | 
 37 |             // measure the spine animation and position it inside its container to align it to the origin
 38 |             var localRect: PIXI.Rectangle = this.dragon.getLocalBounds();
 39 |             this.dragon.position.set(-localRect.x, -localRect.y);
 40 | 
 41 |             // now we can scale, position and rotate the container as any other display object
 42 |             var scale = Math.min((this.renderer.width * 0.7) / dragonCage.width, (this.renderer.height * 0.7) / dragonCage.height);
 43 |             dragonCage.scale.set(scale, scale);
 44 |             dragonCage.position.set((this.renderer.width - dragonCage.width) * 0.5, (this.renderer.height - dragonCage.height) * 0.5);
 45 | 
 46 |             // add the container to the stage
 47 |             this.stage.addChild(dragonCage);
 48 | 
 49 |             // once position and scaled, set the animation to play
 50 |             this.dragon.state.setAnimationByName(0, 'flying', true);
 51 | 
 52 |             this.animate();
 53 | 
 54 |         }
 55 | 
 56 |         private animate = (): void => {
 57 | 
 58 |             requestAnimationFrame(this.animate);
 59 | 
 60 |             // update the spine animation, only needed if dragon.autoupdate is set to false
 61 |             this.dragon.update(0.01666666666667); // HARDCODED FRAMERATE!
 62 | 
 63 |             this.renderer.render(this.stage);
 64 | 
 65 |         }
 66 | 
 67 |     }
 68 | 
 69 | }
 70 | 
 71 | module Spine {
 72 | 
 73 |     export class Goblin {
 74 | 
 75 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 76 | 
 77 |         private stage: PIXI.Container;
 78 | 
 79 |         private goblin: PIXI.spine.Spine;
 80 | 
 81 |         constructor() {
 82 | 
 83 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 84 |             document.body.appendChild(this.renderer.view);
 85 | 
 86 |             // create the root of the scene graph
 87 |             this.stage = new PIXI.Container();
 88 |             this.stage.interactive = true;
 89 | 
 90 |             PIXI.loader.add('goblins', '../../_assets/spine/goblins.json').load(this.onAssetsLoaded);
 91 | 
 92 |         }
 93 | 
 94 |         private onAssetsLoaded = (loader: PIXI.loaders.Loader, res: any): void => {
 95 | 
 96 |             //initiate the spine animation
 97 |             this.goblin = new PIXI.spine.Spine(res.goblins.spineData);
 98 |             this.goblin.skeleton.setSkinByName('goblin');
 99 |             this.goblin.skeleton.setSlotsToSetupPose();
100 | 
101 |             this.goblin.position.x = 400;
102 |             this.goblin.position.y = 600;
103 |             this.goblin.scale.set(1.5);
104 | 
105 |             this.goblin.state.setAnimationByName(0, 'walk', true);
106 | 
107 |             this.stage.addChild(this.goblin);
108 | 
109 |             this.stage.on('click', () => {
110 | 
111 |                 // change current skin
112 |                 var currentSkinName = this.goblin.skeleton.skin.name;
113 |                 var newSkinName = (currentSkinName === 'goblin' ? 'goblingirl' : 'goblin');
114 |                 this.goblin.skeleton.setSkinByName(newSkinName);
115 |                 this.goblin.skeleton.setSlotsToSetupPose();
116 | 
117 |             });
118 | 
119 |             this.animate();
120 | 
121 |         }
122 | 
123 |         private animate = (): void => {
124 | 
125 |             requestAnimationFrame(this.animate);
126 | 
127 |             this.renderer.render(this.stage);
128 | 
129 |         }
130 | 
131 |     }
132 | 
133 | }
134 | 
135 | module Spine {
136 | 
137 |     export class Pixie {
138 | 
139 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
140 | 
141 |         private stage: PIXI.Container;
142 | 
143 |         private pixie: PIXI.spine.Spine;
144 | 
145 |         private position: number;
146 |         private background: PIXI.Sprite;
147 |         private background2: PIXI.Sprite;
148 |         private foreground: PIXI.Sprite;
149 |         private foreground2: PIXI.Sprite;
150 | 
151 |         constructor() {
152 | 
153 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
154 |             document.body.appendChild(this.renderer.view);
155 | 
156 |             // create the root of the scene graph
157 |             this.stage = new PIXI.Container();
158 |             this.stage.interactive = true;
159 | 
160 |             PIXI.loader.add('pixie', '../../_assets/spine/pixie.json').load(this.onAssetsLoaded);
161 | 
162 |         }
163 | 
164 |         private onAssetsLoaded = (loader: PIXI.loaders.Loader, res: any): void => {
165 | 
166 |             this.background = PIXI.Sprite.fromImage('../../_assets/spine/iP4_BGtile.jpg');
167 |             this.background2 = PIXI.Sprite.fromImage('../../_assets/spine/iP4_BGtile.jpg');
168 |             this.stage.addChild(this.background);
169 |             this.stage.addChild(this.background2);
170 | 
171 |             this.foreground = PIXI.Sprite.fromImage('../../_assets/spine/iP4_ground.png');
172 |             this.foreground2 = PIXI.Sprite.fromImage('../../_assets/spine/iP4_ground.png');
173 |             this.stage.addChild(this.foreground);
174 |             this.stage.addChild(this.foreground2);
175 |             this.foreground.position.y = this.foreground2.position.y = 640 - this.foreground2.height;
176 | 
177 |             this.pixie = new PIXI.spine.Spine(res.pixie.spineData);
178 | 
179 |             var scale = 0.3;
180 | 
181 |             this.pixie.position.x = 1024 / 3;
182 |             this.pixie.position.y = 500;
183 | 
184 |             this.pixie.scale.x = this.pixie.scale.y = scale;
185 | 
186 |             this.stage.addChild(this.pixie);
187 | 
188 |             this.pixie.stateData.setMixByName('running', 'jump', 0.2);
189 |             this.pixie.stateData.setMixByName('jump', 'running', 0.4);
190 | 
191 |             this.pixie.state.setAnimationByName(0, 'running', true);
192 | 
193 |             this.stage.on('mousedown', this.onTouchStart);
194 |             this.stage.on('touchstart', this.onTouchStart);
195 | 
196 |             this.animate();
197 | 
198 |         }
199 | 
200 |         private onTouchStart = (): void => {
201 | 
202 |             this.pixie.state.setAnimationByName(0, 'jump', false);
203 |             this.pixie.state.addAnimationByName(0, 'running', true, 0);
204 | 
205 |         }
206 | 
207 |         private animate = (): void => {
208 | 
209 |             this.position += 10;
210 | 
211 |             this.background.position.x = -(this.position * 0.6);
212 |             this.background.position.x %= 1286 * 2;
213 |             if (this.background.position.x < 0) {
214 |                 this.background.position.x += 1286 * 2;
215 |             }
216 |             this.background.position.x -= 1286;
217 | 
218 |             this.background2.position.x = -(this.position * 0.6) + 1286;
219 |             this.background2.position.x %= 1286 * 2;
220 |             if (this.background2.position.x < 0) {
221 |                 this.background2.position.x += 1286 * 2;
222 |             }
223 |             this.background2.position.x -= 1286;
224 | 
225 |             this.foreground.position.x = -this.position;
226 |             this.foreground.position.x %= 1286 * 2;
227 |             if (this.foreground.position.x < 0) {
228 |                 this.foreground.position.x += 1286 * 2;
229 |             }
230 |             this.foreground.position.x -= 1286;
231 | 
232 |             this.foreground2.position.x = -this.position + 1286;
233 |             this.foreground2.position.x %= 1286 * 2;
234 |             if (this.foreground2.position.x < 0) {
235 |                 this.foreground2.position.x += 1286 * 2;
236 |             }
237 |             this.foreground2.position.x -= 1286;
238 | 
239 |             requestAnimationFrame(this.animate);
240 | 
241 |             this.renderer.render(this.stage);
242 | 
243 |         }
244 | 
245 |     }
246 | 
247 |     module Spine {
248 | 
249 |         export class SpineBoy {
250 | 
251 |             private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
252 | 
253 |             private stage: PIXI.Container;
254 | 
255 |             private spineboy: PIXI.spine.Spine;
256 | 
257 |             constructor() {
258 | 
259 |                 this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
260 |                 document.body.appendChild(this.renderer.view);
261 | 
262 |                 // create the root of the scene graph
263 |                 this.stage = new PIXI.Container();
264 |                 this.stage.interactive = true;
265 | 
266 |                 PIXI.loader.add('spineboy', '../../_assets/spine/spineboy.json').load(this.onAssetsLoaded);
267 | 
268 |             }
269 | 
270 |             private onAssetsLoaded = (loader: PIXI.loaders.Loader, res: any): void => {
271 | 
272 |                 //initiate the spine animation
273 |                 this.spineboy = new PIXI.spine.Spine(res.spineboy.spineData);
274 |                 this.spineboy.position.x = this.renderer.width / 2;
275 |                 this.spineboy.position.y = this.renderer.height;
276 |                 this.spineboy.scale.set(1.5);
277 | 
278 |                 // set up the mixes!
279 |                 this.spineboy.stateData.setMixByName('walk', 'jump', 0.2);
280 |                 this.spineboy.stateData.setMixByName('jump', 'walk', 0.4);
281 | 
282 |                 // play animation
283 |                 this.spineboy.state.setAnimationByName(0, 'walk', true);
284 | 
285 |                 this.stage.addChild(this.spineboy);
286 | 
287 | 
288 |                 this.stage.on('click', () => {
289 | 
290 |                     this.spineboy.state.setAnimationByName(0, 'jump', false);
291 |                     this.spineboy.state.addAnimationByName(0, 'walk', true, 0);
292 | 
293 |                 });
294 | 
295 |                 this.animate();
296 | 
297 |             }
298 | 
299 |             private animate = (): void => {
300 | 
301 |                 requestAnimationFrame(this.animate);
302 | 
303 |                 this.renderer.render(this.stage);
304 | 
305 |             }
306 | 
307 |         }
308 | 
309 |     }
310 | 
311 | }


--------------------------------------------------------------------------------
/pixi-spine.d.ts:
--------------------------------------------------------------------------------
  1 | // Type definitions for pixi-spine [dev 9/Jul]
  2 | // Project: https://github.com/pixijs/pixi-spine/
  3 | // Definitions by: martijncroezen <https://github.com/pixijs/pixi-typescript>
  4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
  5 | 
  6 | ///<reference path="pixi.js.d.ts"/>
  7 | declare module PIXI {
  8 | 
  9 |     export module spine {
 10 | 
 11 |         export interface Timeline {
 12 | 
 13 |             frames: number[];
 14 | 
 15 |             getFrameCount(): number;
 16 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
 17 | 
 18 |         }
 19 | 
 20 |         export interface Attachment {
 21 | 
 22 |             name: string;
 23 |             type: number;
 24 | 
 25 |         }
 26 | 
 27 |         export class Animation {
 28 | 
 29 |             constructor(name: string, timelines?: Timeline[], duration?: number);
 30 | 
 31 |             apply(skeleton: Skeleton, lastTime: number, time: number, loop?: boolean, events?: Event[]): void;
 32 |             mix(skeleton: Skeleton, lastTime: number, time: number, loop?: boolean, events?: any[], alpha?: number): void;
 33 |             binarySearch(values: number[], target: number, step: number): number;
 34 |             binarySearch1(values: number[], target: number): number;
 35 |             linearSearch(values: number[], target: number, step: number): number;
 36 | 
 37 |             name: string;
 38 |             timelines: Timeline[];
 39 |             duration: number;
 40 | 
 41 |         }
 42 | 
 43 |         export class AnimationState {
 44 | 
 45 |             data: AnimationStateData;
 46 |             tracks: TrackEntry[];
 47 |             events: Event[];
 48 |             onStart: (index: number) => void;
 49 |             onEnd: (trackIndex: number) => void;
 50 |             onComplete: (i: number, count: number) => void;
 51 |             onEvent: (i: number, event: Event) => void;
 52 |             timeScale: number;
 53 | 
 54 |             constructor(stateData: AnimationStateData);
 55 | 
 56 |             update(delta: number): void;
 57 |             apply(skeleton: Skeleton): void;
 58 |             clearTracks(): void;
 59 |             clearTrack(trackIndex: number): void;
 60 |             private _expandToIndex(index: number): TrackEntry;
 61 |             setCurrent(index: number, entry: TrackEntry): void;
 62 |             setAnimationByName(trackIndex: number, animationName: string, loop: boolean): TrackEntry;
 63 |             setAnimation(trackIndex: number, animation: Animation, loop: boolean): TrackEntry;
 64 |             addAnimationByName(trackIndex: number, animationName: string, loop: boolean, delay: number): TrackEntry;
 65 |             addAnimation(trackIndex: number, animation: Animation, loop: boolean, delay: number): TrackEntry;
 66 |             getCurrent(trackIndex: number): TrackEntry;
 67 | 
 68 |         }
 69 | 
 70 |         export class Spine extends PIXI.Container {
 71 | 
 72 |             constructor(spineData: any);
 73 | 
 74 |             static fromAtlas(resourceName: string): Spine;
 75 | 
 76 |             update(dt: number): void;
 77 | 
 78 |             private autoUpdateTransform(): void;
 79 |             private createSprite(slot: Slot, attachment: Attachment): Sprite;
 80 |             private createMesh(slot, attachment)
 81 | 
 82 |             spineData: any;
 83 |             skeleton: Skeleton;
 84 |             stateData: AnimationStateData;
 85 |             state: AnimationState;
 86 |             slotContainers: PIXI.Container[];
 87 |             autoUpdate: boolean;
 88 | 
 89 |         }
 90 | 
 91 |         export class AnimationStateData {
 92 | 
 93 |             constructor(skeletonData: SkeletonData);
 94 | 
 95 |             private _skelentonData: SkeletonData;
 96 |             private animationToMixTime: number;
 97 |             defaultMix: number;
 98 |             skeletonData: SkeletonData;
 99 |             setMixByName(fromName: string, toName: string, duration: number): void;
100 |             setMix(from: Animation, to: Animation, duration: number): void;
101 |             getMix(from: Animation, to: Animation): number;
102 | 
103 |         }
104 | 
105 |         export class AttachmentType {
106 | 
107 |             static region: number;
108 |             static boundingbox: number;
109 |             static mesh: number;
110 |             static skinnedmesh: number;
111 | 
112 |         }
113 | 
114 |         export class Bone {
115 | 
116 |             data: BoneData;
117 |             skeleton: Skeleton;
118 |             parent: Bone;
119 | 
120 |             constructor(boneData: BoneData, skeleton: Skeleton, parent: Bone);
121 | 
122 |             x: number;
123 |             y: number;
124 |             rotation: number;
125 |             rotationIK: number;
126 |             scaleX: number;
127 |             scaleY: number;
128 |             flipX: boolean;
129 |             flipY: boolean;
130 |             m00: number;
131 |             m01: number;
132 |             worldX: number;
133 |             m10: number;
134 |             m11: number;
135 |             worldY: number;
136 |             worldRotation: number;;
137 |             worldScaleX: number;
138 |             worldScaleY: number;
139 |             worldFlipX: boolean;
140 |             worldFlipY: boolean;
141 | 
142 |             updateWorldTransform(): void;
143 |             setToSetupPose(): void;
144 |             worldToLocal(world: number[]): void;
145 |             localToWorld(local: number[]): void;
146 | 
147 |         }
148 | 
149 |         export class BoneData {
150 | 
151 |             name: string;
152 |             parent: Bone;
153 | 
154 |             constructor(name: string, parent: Bone);
155 | 
156 |             length: number;
157 |             x: number;
158 |             y: number;
159 |             rotation: number;
160 |             scaleX: number;
161 |             scaleY: number;
162 |             inheritScale: boolean;
163 |             inheritRotation: boolean;
164 |             flipX: boolean;
165 |             flipY: boolean;
166 | 
167 |         }
168 | 
169 |         export class BoundingBoxAttachment implements Attachment {
170 | 
171 |             constructor(name: string);
172 | 
173 |             name: string;
174 |             vertices: number[];
175 |             type: number;
176 | 
177 |             computeWorldVertices(x: number, y: number, bone: Bone, worldVertices: number[]): void;
178 | 
179 |         }
180 | 
181 |         export class ColorTimeline implements Timeline {
182 | 
183 |             constructor(frameCount: number);
184 | 
185 |             curves: Curves;
186 |             frames: number[];
187 |             slotIndex: number;
188 | 
189 |             getFrameCount(): number;
190 |             setFrame(frameIndex: number, time: number, r: number, g: number, b: number, a: number): void;
191 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
192 | 
193 |         }
194 | 
195 |         export class Curves {
196 | 
197 |             constructor(frameCount: number[]);
198 | 
199 |             curves: number[];
200 | 
201 |             setLinear(frameIndex: number): void;
202 |             setStepped(frameIndex: number): void;
203 |             setCurve(frameIndex: number, cx1: number, cy1: number, cx2: number, cy2: number): void;
204 |             getCurvePercent(frameIndex: number, percent: number): number;
205 | 
206 |         }
207 | 
208 |         export class DrawOrderTimeline implements Timeline {
209 | 
210 |             constructor(frameCount: number);
211 | 
212 |             frames: number[];
213 |             drawOrders: number[];
214 | 
215 |             getFrameCount(): number;
216 |             setFrame(frameIndex: number, time: number, drawOrder: number[]): void;
217 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
218 | 
219 |         }
220 | 
221 |         export class Event {
222 | 
223 |             constructor(data: any);
224 | 
225 |             data: any;
226 |             intValue: number;
227 |             floatValue: number;
228 |             stringValue: string;
229 | 
230 |         }
231 | 
232 |         export class EventData {
233 | 
234 |             constructor(name: string);
235 | 
236 |             name: string;
237 | 
238 |             intValue: number;
239 |             floatValue: number;
240 |             stringValue: string;
241 | 
242 |         }
243 | 
244 |         export class EventTimeline implements Timeline {
245 | 
246 |             constructor(frameCount: number);
247 | 
248 |             frames: number[];
249 |             events: Event[];
250 | 
251 |             getFrameCount(): number;
252 |             setFrame(frameIndex: number, time: number, event: Event): void;
253 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
254 | 
255 |         }
256 | 
257 | 
258 |         export class FfdTimeline implements Timeline {
259 | 
260 |             constructor(frameCount: number);
261 | 
262 |             curves: Curves;
263 |             frames: number[];
264 |             frameVertices: number[];
265 |             slotIndex: number;
266 |             attachment: number;
267 | 
268 |             getFrameCount(): number;
269 |             setFrame(frameIndex: number, time: number, vertices: number[]): void;
270 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
271 | 
272 |         }
273 | 
274 |         export class FlipXTimeline implements Timeline {
275 | 
276 |             constructor(frameCount: number);
277 | 
278 |             curves: Curves;
279 |             frames: number[];
280 |             boneIndex: number;
281 | 
282 |             getFrameCount(): number;
283 |             setFrame(frameIndex: number, time: number, vertices: number[]): void;
284 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
285 | 
286 |         }
287 | 
288 |         export class FlipYTimeline implements Timeline {
289 | 
290 |             constructor(frameCount: number);
291 | 
292 |             curves: Curves;
293 |             frames: number[];
294 |             boneIndex: number;
295 | 
296 |             getFrameCount(): number;
297 |             setFrame(frameIndex: number, time: number, vertices: number[]): void;
298 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
299 | 
300 |         }
301 | 
302 |         export class IkConstraint {
303 | 
304 |             constructor(data: IkConstraintData, skeleton: Skeleton);
305 | 
306 |             data: IkConstraintData;
307 |             mix: number;
308 |             bendDirection: number;
309 |             bones: Bone[];
310 |             target: Bone;
311 | 
312 |             apply(): void;
313 |             apply1(bone: Bone, targetX: number, targetY: number, alpha: number): void;
314 |             apply2(parent: Bone, child: Bone, targetX: number, targetY: number, bendDirection: number, alpha: number): void;
315 | 
316 |         }
317 | 
318 |         export class IkConstraintData {
319 | 
320 |             constructor(name: string);
321 | 
322 |             name: string;
323 |             bones: Bone[];
324 |             target: Bone;
325 |             bendDirection: number;
326 |             mix: number;
327 | 
328 |         }
329 | 
330 |         export class IkConstraintTimeline implements Timeline {
331 |             constructor(frameCount: number);
332 | 
333 |             curves: Curves;
334 |             frames: number[];
335 |             ikConstraintIndex: number;
336 | 
337 |             getFrameCount(): number;
338 |             setFrame(frameIndex: number, time: number, mix: number, bendDirection: number): void;
339 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
340 | 
341 |         }
342 | 
343 |         export class MeshAttachment implements Attachment {
344 | 
345 |             constructor(name: string);
346 | 
347 |             name: string;
348 |             type: number;
349 |             vertices: number[];
350 |             uvs: number[]
351 |             regionUVs: number[]
352 |             triangles: number[]
353 |             hullLength: number;
354 |             r: number;
355 |             g: number;
356 |             b: number;
357 |             a: number;
358 |             path: string;
359 |             rendererObject: any;
360 |             regionU: number;
361 |             regionV: number;
362 |             regionU2: number;
363 |             regionV2: number;
364 |             regionRotate: boolean;
365 |             regionOffsetX: number;
366 |             regionOffsetY: number;
367 |             regionWidth: number;
368 |             regionHeight: number;
369 |             regionOriginalWidth: number;
370 |             regionOriginalHeight: number;
371 |             edges: number[];
372 |             width: number;
373 |             height: number;
374 | 
375 |             updateUVs(): void;
376 |             computeWorldVertices(x: number, y: number, slot: Slot, worldVertices: number[]): void;
377 | 
378 |         }
379 | 
380 |         export class RegionAttachment implements Attachment {
381 | 
382 |             constructor(name: string);
383 | 
384 |             name: string;
385 |             offset: number[];
386 |             uvs: number[]
387 |             type: number;
388 |             x: number;
389 |             y: number;
390 |             rotation: number;
391 |             scaleX: number;
392 |             scaleY: number;
393 |             width: number;
394 |             height: number;
395 |             r: number;
396 |             g: number;
397 |             b: number;
398 |             a: number;
399 |             path: string;
400 |             rendererObject: any;
401 |             regionOffsetX: number;
402 |             regionOffsetY: number;
403 |             regionWidth: number;
404 |             regionHeight: number;
405 |             regionOriginalWidth: number;
406 |             regionOriginalHeight: number;
407 | 
408 |             updateOffset(): void;
409 |             setUVs(u: number, v: number, u2: number, v2: number, rotate: number): void;
410 |             computeVertices(x: number, y: number, bone: Bone, vertices: number[]): void;
411 | 
412 |         }
413 | 
414 |         export class RotateTimeline implements Timeline {
415 | 
416 |             constructor(frameCount: number);
417 | 
418 |             curves: Curves;
419 |             frames: number[];
420 |             boneIndex: number;
421 | 
422 |             getFrameCount(): number;
423 |             setFrame(frameIndex: number, time: number, mix: number, bendDirection: number): void;
424 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
425 | 
426 |         }
427 | 
428 |         export class ScaleTimeline implements Timeline {
429 | 
430 |             constructor(frameCount: number);
431 | 
432 |             curves: Curves;
433 |             frames: number[];
434 |             boneIndex: number;
435 | 
436 |             getFrameCount(): number;
437 |             setFrame(frameIndex: number, time: number, mix: number, bendDirection: number): void;
438 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
439 | 
440 |         }
441 | 
442 |         export class Skeleton {
443 | 
444 |             constructor(skeletonData: SkeletonData);
445 | 
446 |             data: SkeletonData;
447 |             bones: Bone[];
448 |             slots: Slot[];
449 |             drawOrder: Slot[];
450 |             ikConstraints: IkConstraint[];
451 |             boneCache: Bone[][];
452 |             x: number;
453 |             y: number;
454 |             skin: Skin;
455 |             r: number;
456 |             g: number;
457 |             b: number;
458 |             a: number;
459 |             time: number;
460 |             flipX: boolean;
461 |             flipY: boolean;
462 | 
463 |             updateCache(): void;
464 |             updateWorldTransform(): void;
465 |             setToSetupPose(): void;
466 |             setBonesToSetupPose(): void;
467 |             setSlotsToSetupPose(): void;
468 |             getRootBone(): Bone;
469 |             findBone(boneName: string): Bone;
470 |             findBoneIndex(boneName: string): number;
471 |             findSlot(slotName: string): Slot;
472 |             findSlotIndex(slotName: string): number;
473 |             setSkinByName(skinName: string): Skin;
474 |             setSkin(newSkin: Skin): void;
475 |             getAttachmentBySlotName(slotName: string, attachmentName: string): Attachment;
476 |             getAttachmentBySlotIndex(slotIndex: number, attachmentName: string): Attachment
477 |             setAttachment(slotName: string, attachmentName: string): void;
478 |             findIkConstraint(ikConstraintName: string): IkConstraint;
479 |             update(delta: number): void;
480 |             resetDrawOrder(): void;
481 | 
482 |         }
483 | 
484 |         export class SkeletonBounds {
485 | 
486 |             polygonPool: Polygon[];
487 |             polygons: Polygon[];
488 |             boundingBoxes: BoundingBoxAttachment[];
489 |             minX: number;
490 |             minY: number;
491 |             maxX: number;
492 |             maxY: number;
493 | 
494 |             update(skeleton: Skeleton, updateAabb: boolean): void;
495 |             aabbCompute(): void;
496 |             aabbContainsPoint(x: number, y: number): void;
497 |             aabbIntersectsSegment(x1: number, y1: number, x2: number, y2: number): boolean;
498 |             aabbIntersectsSkeleton(bounds: SkeletonBounds): boolean;
499 |             containsPoint(x: number, y: number): BoundingBoxAttachment;
500 |             intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
501 |             polygonContainsPoint(polygon: Polygon, x: number, y: number): boolean;
502 |             polygonIntersectsSegment(polygon: Polygon, x1: number, y1: number, x2: number, y2: number): boolean;
503 |             getPolygon(attachment: Attachment): Polygon;
504 |             getWidth(): number;
505 |             getHeight(): number;
506 | 
507 |         }
508 | 
509 |         export class SkeletonData {
510 | 
511 |             bones: Bone[];
512 |             slots: Slot[];
513 |             skins: Skin[];
514 |             events: Event[];
515 |             animations: Animation[];
516 |             ikConstraints: IkConstraint[];
517 |             name: string;
518 |             defaultSkin: Skin;
519 |             width: number;
520 |             height: number;
521 |             version: any;
522 |             hash: any;
523 | 
524 |             findBone(boneName: string): Bone;
525 |             findBoneIndex(boneName: string): number;
526 |             findSlot(slotName: string): Slot;
527 |             findSlotIndex(slotName: string): number;
528 |             findSkin(skinName: string): Skin;
529 |             findEvent(eventName: string): Event;
530 |             findAnimation(animationName: string): Animation
531 |             findIkConstraint(ikConstraintName: string): IkConstraint;
532 | 
533 |         }
534 | 
535 |         export class SkeletonJsonParser {
536 | 
537 |             constructor(attachmentLoader: any);
538 | 
539 |             attachmentLoader: any;
540 |             scale: number;
541 | 
542 |             readSkeletonData(root: Bone, name: string): void;
543 |             readAttachment(skin: Skin, name: string, map: any): void;
544 |             readAnimation(name: string, map: any, skeletonData: SkeletonData): void;
545 |             readCurve(timeline: Timeline, frameIndex: number, valueMap: any): void;
546 |             toColor(hexString: string, colorIndex: string): number;
547 |             getFloatArray(map: any, name: string, scale: number): number[];
548 |             getIntArray(map: any, name: string): number[];
549 | 
550 |         }
551 | 
552 |         export class Skin {
553 | 
554 |             constructor(name: string);
555 | 
556 |             name: string;
557 |             attachments: Attachment[];
558 |             addAttachment(slotIndex: number, name: string, attachment: Attachment): void;
559 |             getAttachment(slotIndex: number, name: string): Attachment;
560 | 
561 |             protected _attachAll(skeleton: Skeleton, oldSkin: Skin): void;
562 | 
563 |         }
564 | 
565 |         export class SkinnedMeshAttachment implements Attachment {
566 | 
567 |             constructor(name: string);
568 | 
569 |             name: string;
570 |             type: number;
571 |             bones: number[];
572 |             weights: number[];
573 |             uvs: number[];
574 |             regionUVs: number[];
575 |             triangles: number[];
576 |             hullLength: number;
577 |             r: number;
578 |             g: number;
579 |             b: number;
580 |             a: number;
581 |             path: string;
582 |             rendererObject: any;
583 |             regionU: number;
584 |             regionV: number;
585 |             regionU2: number;
586 |             regionV2: number;
587 |             regionRotate: boolean;
588 |             regionOffsetX: number;
589 |             regionOffsetY: number;
590 |             regionWidth: number;
591 |             regionHeight: number;
592 |             regionOriginalWidth: number;
593 |             regionOriginalHeight: number;
594 |             edges: number[];
595 |             width: number;
596 |             height: number;
597 | 
598 |             updateUVs(u: number, v: number, u2: number, v2: number, rotate: boolean): void;
599 |             computeWorldVertices(x: number, y: number, slot: Slot, worldVertices: number[]): void;
600 | 
601 |         }
602 | 
603 |         export class Slot {
604 | 
605 |             constructor(slotData: SlotData, bone: Bone);
606 | 
607 |             data: SlotData;
608 |             bone: Bone;
609 |             r: number;
610 |             g: number;
611 |             b: number;
612 |             a: number;
613 |             _attachmentTime: number;
614 |             attachment: Attachment;
615 |             attachmentVertices: number[];
616 |             setAttachment(attachment: Attachment): void;
617 |             setAttachmentTime(time: number): void;
618 |             getAttachmentTime(): number;
619 |             setToSetupPose(): void;
620 | 
621 |         }
622 | 
623 |         export class SlotData {
624 | 
625 |             constructor(name: string, boneData: BoneData);
626 | 
627 |             name: string;
628 |             boneData: BoneData;
629 | 
630 |             static PIXI_BLEND_MODE_MAP: {
631 |                 multiply: number;
632 |                 screen: number;
633 |                 additive: number;
634 |                 normal: number;
635 |             };
636 |             r: number;
637 |             g: number;
638 |             b: number;
639 |             a: number;
640 |             attachmentName: string;
641 |             blendMode: number;
642 | 
643 |         }
644 | 
645 |         export class TrackEntry {
646 | 
647 |             next: TrackEntry;
648 |             previous: TrackEntry;
649 |             animation: Animation;
650 |             loop: boolean;
651 |             delay: number;
652 |             time: number;
653 |             lastTime: number;
654 |             endTime: number;
655 |             timeScale: number;
656 |             mixTime: number;
657 |             mixDuration: number;
658 |             mix: number;
659 |             onStart: (index: number) => void;
660 |             onEnd: (trackIndex: number) => void;
661 |             onComplete: (i: number, count: number) => void;
662 |             onEvent: (i: number, event: Event) => void;
663 | 
664 |         }
665 | 
666 |         export class TranslateTimeline implements Timeline {
667 | 
668 |             constructor(frameCount: number);
669 | 
670 |             curves: Curves[];
671 |             frames: number[];
672 |             boneIndex: number;
673 | 
674 |             getFrameCount(): number;
675 |             setFrame(frameIndex: number, time: number, x: number, y: number): void;
676 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
677 | 
678 |         }
679 | 
680 |         export class Atlas {
681 | 
682 |             constructor(atlasText: string, baseUrl: string, crossOrigin: any);
683 | 
684 |             pages: AtlasPage[];
685 |             regions: AtlasRegion[];
686 |             texturesLoading: number;
687 | 
688 |             findRegion(name: string): AtlasRegion;
689 |             dispose(): void;
690 |             updateUVs(page: AtlasPage): void;
691 | 
692 |             Format: {
693 | 
694 |                 alpha: number;
695 |                 intensity: number;
696 |                 luminanceAlpha: number;
697 |                 rgb565: number;
698 |                 rgba4444: number;
699 |                 rgb888: number;
700 |                 rgba8888: number;
701 | 
702 |             };
703 | 
704 |             TextureFilter: {
705 | 
706 |                 nearest: number;
707 |                 linear: number;
708 |                 mipMap: number;
709 |                 mipMapNearestNearest: number;
710 |                 mipMapLinearNearest: number;
711 |                 mipMapNearestLinear: number;
712 |                 mipMapLinearLinear: number;
713 | 
714 |             };
715 | 
716 |             TextureWrap: {
717 | 
718 |                 mirroredRepeat: number;
719 |                 clampToEdge: number;
720 |                 repeat: number;
721 | 
722 |             };
723 | 
724 |         }
725 | 
726 |         export class AtlasAttachmentParser {
727 | 
728 |             constructor(atlas: Atlas);
729 | 
730 |             newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment;
731 |             newMeshAttachment(skin: Skin, name: string, path: string): SkinnedMeshAttachment;
732 |             newSkinnedMeshAttachment(skin: Skin, name: string, path: string): SkinnedMeshAttachment;
733 |             newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment;
734 | 
735 |         }
736 | 
737 |         export class AtlasPage {
738 |             name: string;
739 |             format: any;
740 |             minFilter: any;
741 |             magFilter: any;
742 |             uWrap: any;
743 |             vWrap: any;
744 |             rendererObject: any;
745 |             width: number;
746 |             height: number;
747 | 
748 |         }
749 | 
750 |         export class AtlasReader {
751 |             constructor(text: string);
752 | 
753 |             lines: string[];
754 |             index: number;
755 | 
756 |             trim(value: string): string;
757 |             readLine(): string;
758 |             readValue(): string;
759 |             readTuple(tuple: number): number;
760 | 
761 |         }
762 | 
763 |         export class AtlasRegion {
764 | 
765 |             page: AtlasPage;
766 |             name: string;
767 |             x: number;
768 |             y: number;
769 |             width: number;
770 |             height: number;
771 |             u: number;
772 |             v: number;
773 |             u2: number;
774 |             v2: number;
775 |             offsetX: number;
776 |             offsetY: number;
777 |             originalWidth: number;
778 |             originalHeight: number;
779 |             index: number;
780 |             rotate: boolean;
781 |             splits: any;
782 |             pads: any;
783 | 
784 | 
785 |         }
786 | 
787 |         export class AttachmentTimeline implements Timeline {
788 | 
789 |             constructor(frameCount: number);
790 | 
791 |             slotIndex: number;
792 |             frames: number[];
793 |             attachmentNames: string[];
794 | 
795 |             getFrameCount(): number;
796 |             setFrame(frameIndex: number, time: number, attachmentName: string): void;
797 |             apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number): void;
798 | 
799 |         }
800 | 
801 |         export class atlasParser {
802 | 
803 |             constructor(resource: any, next: any);
804 | 
805 |             AnimCache: any;
806 |             enableCaching: boolean;
807 | 
808 |         }
809 | 
810 |     }
811 | 
812 | }


--------------------------------------------------------------------------------
/pixi.js.d.ts:
--------------------------------------------------------------------------------
   1 | // Type definitions for Pixi.js [dev 19/Aug]
   2 | // Project: https://github.com/GoodBoyDigital/pixi.js/
   3 | // Definitions by: clark-stevenson <https://github.com/pixijs/pixi-typescript>
   4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
   5 | 
   6 | declare class PIXI {
   7 | 
   8 |     static VERSION: string;
   9 |     static PI_2: number;
  10 |     static RAD_TO_DEG: number;
  11 |     static DEG_TO_RAD: number;
  12 |     static TARGET_FPMS: number;
  13 |     static RENDERER_TYPE: {
  14 |         UNKNOWN: number;
  15 |         WEBGL: number;
  16 |         CANVAS: number;
  17 |     };
  18 |     static BLEND_MODES: {
  19 |         NORMAL: number;
  20 |         ADD: number;
  21 |         MULTIPLY: number;
  22 |         SCREEN: number;
  23 |         OVERLAY: number;
  24 |         DARKEN: number;
  25 |         LIGHTEN: number;
  26 |         COLOR_DODGE: number;
  27 |         COLOR_BURN: number;
  28 |         HARD_LIGHT: number;
  29 |         SOFT_LIGHT: number;
  30 |         DIFFERENCE: number;
  31 |         EXCLUSION: number;
  32 |         HUE: number;
  33 |         SATURATION: number;
  34 |         COLOR: number;
  35 |         LUMINOSITY: number;
  36 | 
  37 |     };
  38 |     static DRAW_MODES: {
  39 |         POINTS: number;
  40 |         LINES: number;
  41 |         LINE_LOOP: number;
  42 |         LINE_STRIP: number;
  43 |         TRIANGLES: number;
  44 |         TRIANGLE_STRIP: number;
  45 |         TRIANGLE_FAN: number;
  46 |     };
  47 |     static SCALE_MODES: {
  48 |         DEFAULT: number;
  49 |         LINEAR: number;
  50 |         NEAREST: number;
  51 |     };
  52 |     static RETINA_PREFIX: string;
  53 |     static RESOLUTION: number;
  54 |     static FILTER_RESOLUTION: number;
  55 |     static DEFAULT_RENDER_OPTIONS: {
  56 |         view: HTMLCanvasElement;
  57 |         resolution: number;
  58 |         antialias: boolean;
  59 |         forceFXAA: boolean;
  60 |         autoResize: boolean;
  61 |         transparent: boolean;
  62 |         backgroundColor: number;
  63 |         clearBeforeRender: boolean;
  64 |         preserveDrawingBuffer: boolean;
  65 |         roundPixels: boolean;
  66 |     };
  67 |     static SHAPES: {
  68 |         POLY: number;
  69 |         RECT: number;
  70 |         CIRC: number;
  71 |         ELIP: number;
  72 |         RREC: number;
  73 |     };
  74 |     static SPRITE_BATCH_SIZE: number;
  75 | 
  76 | }
  77 | 
  78 | declare module PIXI {
  79 | 
  80 |     export function autoDetectRenderer(width: number, height: number, options?: PIXI.RendererOptions, noWebGL?: boolean): PIXI.WebGLRenderer | PIXI.CanvasRenderer;
  81 |     export var loader: PIXI.loaders.Loader;
  82 | 
  83 |     //https://github.com/primus/eventemitter3
  84 |     export class EventEmitter {
  85 | 
  86 |         listeners(event: string): Function[];
  87 |         emit(event: string, ...args: any[]): boolean;
  88 |         on(event: string, fn: Function, context?: any): EventEmitter;
  89 |         once(event: string, fn: Function, context?: any): EventEmitter;
  90 |         removeListener(event: string, fn: Function, once?: boolean): EventEmitter;
  91 |         removeAllListeners(event: string): EventEmitter;
  92 | 
  93 |         off(event: string, fn: Function, once?: boolean): EventEmitter;
  94 |         addListener(event: string, fn: Function, context?: any): EventEmitter;
  95 | 
  96 |     }
  97 | 
  98 |     //////////////////////////////////////////////////////////////////////////////
  99 |     ////////////////////////////////CORE//////////////////////////////////////////
 100 |     //////////////////////////////////////////////////////////////////////////////
 101 | 
 102 |     //display
 103 | 
 104 |     export class DisplayObject extends EventEmitter implements interaction.InteractiveTarget {
 105 | 
 106 |         //begin extras.cacheAsBitmap see https://github.com/pixijs/pixi-typescript/commit/1207b7f4752d79a088d6a9a465a3ec799906b1db
 107 |         protected _originalRenderWebGL: WebGLRenderer;
 108 |         protected _originalRenderCanvas: CanvasRenderer;
 109 |         protected _originalUpdateTransform: boolean;
 110 |         protected _originalHitTest: any;
 111 |         protected _cachedSprite: any;
 112 |         protected _originalDestroy: any;
 113 | 
 114 |         cacheAsBitmap: boolean;
 115 | 
 116 |         protected _renderCachedWebGL(renderer: WebGLRenderer): void;
 117 |         protected _initCachedDisplayObject(renderer: WebGLRenderer): void;
 118 |         protected _renderCachedCanvas(renderer: CanvasRenderer): void;
 119 |         protected _initCachedDisplayObjectCanvas(renderer: CanvasRenderer): void;
 120 |         protected _getCachedBounds(): Rectangle;
 121 |         protected _destroyCachedDisplayObject(): void;
 122 |         protected _cacheAsBitmapDestroy(): void;
 123 |         //end extras.cacheAsBitmap
 124 | 
 125 |         protected _sr: number;
 126 |         protected _cr: number;
 127 |         protected _bounds: Rectangle;
 128 |         protected _currentBounds: Rectangle;
 129 |         protected _mask: Rectangle;
 130 |         protected _cachedObject: any;
 131 | 
 132 |         updateTransform(): void;
 133 | 
 134 |         position: Point;
 135 |         scale: Point;
 136 |         pivot: Point;
 137 |         rotation: number;
 138 |         renderable: boolean;
 139 |         alpha: number;
 140 |         visible: boolean;
 141 |         parent: Container;
 142 |         worldAlpha: number;
 143 |         worldTransform: Matrix;
 144 |         filterArea: Rectangle;
 145 | 
 146 |         x: number;
 147 |         y: number;
 148 |         worldVisible: boolean;
 149 |         mask: Graphics | Sprite;
 150 |         filters: AbstractFilter[];
 151 |         name: string;
 152 | 
 153 |         getBounds(matrix?: Matrix): Rectangle;
 154 |         getLocalBounds(): Rectangle;
 155 |         toGlobal(position: Point): Point;
 156 |         toLocal(position: Point, from?: DisplayObject): Point;
 157 |         generateTexture(renderer: CanvasRenderer | WebGLRenderer, scaleMode: number, resolution: number): Texture;
 158 |         setParent(container: Container): Container;
 159 |         destroy(): void;
 160 |         getChildByName(name: string): DisplayObject;
 161 |         getGlobalPosition(point: Point): Point;
 162 | 
 163 |         interactive: boolean;
 164 |         buttonMode: boolean;
 165 |         interactiveChildren: boolean;
 166 |         defaultCursor: string;
 167 |         hitArea: HitArea;
 168 | 
 169 |         on(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 170 |         on(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 171 |         on(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 172 |         on(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 173 |         on(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 174 |         on(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 175 |         on(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 176 |         on(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 177 |         on(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 178 |         on(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 179 |         on(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 180 |         on(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 181 |         on(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 182 |         on(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 183 |         on(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 184 |         on(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 185 |         on(event: string, fn: Function, context?: any): EventEmitter;
 186 | 
 187 |         once(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 188 |         once(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 189 |         once(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 190 |         once(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 191 |         once(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 192 |         once(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 193 |         once(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 194 |         once(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 195 |         once(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 196 |         once(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 197 |         once(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 198 |         once(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 199 |         once(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 200 |         once(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 201 |         once(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 202 |         once(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 203 |         once(event: string, fn: Function, context?: any): EventEmitter;
 204 | 
 205 |     }
 206 | 
 207 |     export class Container extends DisplayObject {
 208 | 
 209 |         protected _renderWebGL(renderer: WebGLRenderer): void;
 210 |         protected _renderCanvas(renderer: CanvasRenderer): void;
 211 | 
 212 |         protected onChildrenChange: () => void;
 213 | 
 214 |         children: DisplayObject[];
 215 | 
 216 |         width: number;
 217 |         height: number;
 218 | 
 219 |         addChild(child: DisplayObject): DisplayObject;
 220 |         addChildAt(child: DisplayObject, index: number): DisplayObject;
 221 |         swapChildren(child: DisplayObject, child2: DisplayObject): void;
 222 |         getChildIndex(child: DisplayObject): number;
 223 |         setChildIndex(child: DisplayObject, index: number): void;
 224 |         getChildAt(index: number): DisplayObject;
 225 |         removeChild(child: DisplayObject): DisplayObject;
 226 |         removeChildAt(index: number): DisplayObject;
 227 |         removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[];
 228 |         destroy(destroyChildren?: boolean): void;
 229 |         generateTexture(renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer, resolution?: number, scaleMode?: number): Texture;
 230 | 
 231 |         renderWebGL(renderer: WebGLRenderer): void;
 232 |         renderCanvas(renderer: CanvasRenderer): void;
 233 | 
 234 |         once(event: 'added', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 235 |         once(event: string, fn: Function, context?: any): EventEmitter;
 236 |         once(event: 'removed', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 237 |         once(event: string, fn: Function, context?: any): EventEmitter;
 238 |         on(event: 'added', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 239 |         on(event: string, fn: Function, context?: any): EventEmitter;
 240 |         on(event: 'removed', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
 241 |         on(event: string, fn: Function, context?: any): EventEmitter;
 242 | 
 243 |     }
 244 | 
 245 |     //graphics
 246 | 
 247 |     export class GraphicsData {
 248 | 
 249 |         constructor(lineWidth: number, lineColor: number, lineAlpha: number, fillColor: number, fillAlpha: number, fill: boolean, shape: Circle | Rectangle | Ellipse | Polygon);
 250 | 
 251 |         lineWidth: number;
 252 |         lineColor: number;
 253 |         lineAlpha: number;
 254 |         fillColor: number;
 255 |         fillAlpha: number;
 256 |         fill: boolean;
 257 |         shape: Circle | Rectangle | Ellipse | Polygon;
 258 |         type: number;
 259 | 
 260 |         clone(): GraphicsData;
 261 | 
 262 |         protected _lineTint: number;
 263 |         protected _fillTint: number;
 264 | 
 265 |     }
 266 |     export class Graphics extends Container {
 267 | 
 268 |         protected boundsDirty: boolean;
 269 |         protected dirty: boolean;
 270 |         protected glDirty: boolean;
 271 | 
 272 |         fillAlpha: number;
 273 |         lineWidth: number;
 274 |         lineColor: number;
 275 |         tint: number;
 276 |         blendMode: number;
 277 |         isMask: boolean;
 278 |         boundsPadding: number;
 279 | 
 280 |         clone(): Graphics;
 281 |         lineStyle(lineWidth?: number, color?: number, alpha?: number): Graphics;
 282 |         moveTo(x: number, y: number): Graphics;
 283 |         lineTo(x: number, y: number): Graphics;
 284 |         quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): Graphics;
 285 |         bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): Graphics;
 286 |         arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): Graphics;
 287 |         arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): Graphics;
 288 |         beginFill(color: number, alpha?: number): Graphics;
 289 |         endFill(): Graphics;
 290 |         drawRect(x: number, y: number, width: number, height: number): Graphics;
 291 |         drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): Graphics;
 292 |         drawCircle(x: number, y: number, radius: number): Graphics;
 293 |         drawEllipse(x: number, y: number, width: number, height: number): Graphics;
 294 |         drawPolygon(path: number[]| Point[]): Graphics;
 295 |         clear(): Graphics;
 296 |         //todo
 297 |         generateTexture(renderer: WebGLRenderer | CanvasRenderer, resolution?: number, scaleMode?: number): Texture;
 298 |         getBounds(matrix?: Matrix): Rectangle;
 299 |         containsPoint(point: Point): boolean;
 300 |         updateLocalBounds(): void;
 301 |         drawShape(shape: Circle | Rectangle | Ellipse | Polygon): GraphicsData;
 302 | 
 303 |     }
 304 |     export interface GraphicsRenderer extends ObjectRenderer {
 305 |         //yikes todo
 306 |     }
 307 |     export interface WebGLGraphicsData {
 308 |         //yikes todo!
 309 |     }
 310 | 
 311 |     //math
 312 | 
 313 |     export class Point {
 314 | 
 315 |         x: number;
 316 |         y: number;
 317 | 
 318 |         constructor(x?: number, y?: number);
 319 | 
 320 |         clone(): Point;
 321 |         copy(p: Point): void;
 322 |         equals(p: Point): boolean;
 323 |         set(x?: number, y?: number): void;
 324 | 
 325 |     }
 326 |     export class Matrix {
 327 | 
 328 |         a: number;
 329 |         b: number;
 330 |         c: number;
 331 |         d: number;
 332 |         tx: number;
 333 |         ty: number;
 334 | 
 335 |         fromArray(array: number[]): void;
 336 |         toArray(transpose?: boolean, out?: number[]): number[];
 337 |         apply(pos: Point, newPos?: Point): Point;
 338 |         applyInverse(pos: Point, newPos?: Point): Point;
 339 |         translate(x: number, y: number): Matrix;
 340 |         scale(x: number, y: number): Matrix;
 341 |         rotate(angle: number): Matrix;
 342 |         append(matrix: Matrix): Matrix;
 343 |         prepend(matrix: Matrix): Matrix;
 344 |         invert(): Matrix;
 345 |         identity(): Matrix;
 346 |         clone(): Matrix;
 347 |         copy(matrix: Matrix): Matrix;
 348 | 
 349 |         static IDENTITY: Matrix;
 350 |         static TEMP_MATRIX: Matrix;
 351 | 
 352 |     }
 353 | 
 354 |     export interface HitArea {
 355 | 
 356 |         contains(x: number, y: number): boolean;
 357 | 
 358 |     }
 359 | 
 360 |     export class Circle implements HitArea {
 361 | 
 362 |         constructor(x?: number, y?: number, radius?: number);
 363 | 
 364 |         x: number;
 365 |         y: number;
 366 |         radius: number;
 367 |         type: number;
 368 | 
 369 |         clone(): Circle;
 370 |         contains(x: number, y: number): boolean;
 371 |         getBounds(): Rectangle;
 372 | 
 373 |     }
 374 |     export class Ellipse implements HitArea {
 375 | 
 376 |         constructor(x?: number, y?: number, width?: number, height?: number);
 377 | 
 378 |         x: number;
 379 |         y: number;
 380 |         width: number;
 381 |         height: number;
 382 |         type: number;
 383 | 
 384 |         clone(): Ellipse;
 385 |         contains(x: number, y: number): boolean;
 386 |         getBounds(): Rectangle;
 387 | 
 388 |     }
 389 |     export class Polygon implements HitArea {
 390 | 
 391 |         constructor(points: Point[]);
 392 |         constructor(points: number[]);
 393 |         constructor(...points: Point[]);
 394 |         constructor(...points: number[]);
 395 | 
 396 |         closed: boolean;
 397 |         points: number[];
 398 |         type: number;
 399 | 
 400 |         clone(): Polygon;
 401 |         contains(x: number, y: number): boolean;
 402 | 
 403 | 
 404 |     }
 405 |     export class Rectangle implements HitArea {
 406 | 
 407 |         constructor(x?: number, y?: number, width?: number, height?: number);
 408 | 
 409 |         x: number;
 410 |         y: number;
 411 |         width: number;
 412 |         height: number;
 413 |         type: number;
 414 | 
 415 |         static EMPTY: Rectangle;
 416 | 
 417 |         clone(): Rectangle;
 418 |         contains(x: number, y: number): boolean;
 419 | 
 420 |     }
 421 |     export class RoundedRectangle implements HitArea {
 422 | 
 423 |         constructor(x?: number, y?: number, width?: number, height?: number, radius?: number);
 424 | 
 425 |         x: number;
 426 |         y: number;
 427 |         width: number;
 428 |         height: number;
 429 |         radius: number;
 430 |         type: number;
 431 | 
 432 |         static EMPTY: Rectangle;
 433 | 
 434 |         clone(): Rectangle;
 435 |         contains(x: number, y: number): boolean;
 436 | 
 437 |     }
 438 | 
 439 |     //particles
 440 | 
 441 |     export interface ParticleContainerProperties {
 442 | 
 443 |         scale?: boolean;
 444 |         position?: boolean;
 445 |         rotation?: boolean;
 446 |         uvs?: boolean;
 447 |         alpha?: boolean;
 448 | 
 449 |     }
 450 |     export class ParticleContainer extends Container {
 451 | 
 452 |         constructor(size?: number, properties?: ParticleContainerProperties, batchSize?: number);
 453 | 
 454 |         protected _maxSize: number;
 455 |         protected _batchSize: number;
 456 |         protected _properties: boolean[];
 457 |         protected _buffers: WebGLBuffer[];
 458 |         protected _bufferToUpdate: number;
 459 | 
 460 |         protected onChildrenChange: (smallestChildIndex?: number) => void;
 461 | 
 462 |         interactiveChildren: boolean;
 463 |         blendMode: number;
 464 |         roundPixels: boolean;
 465 | 
 466 |         setProperties(properties: ParticleContainerProperties): void;
 467 | 
 468 |     }
 469 |     export interface ParticleBuffer {
 470 | 
 471 |         gl: WebGLRenderingContext;
 472 |         vertSize: number;
 473 |         vertByteSize: number;
 474 |         size: number;
 475 |         dynamicProperties: any[];
 476 |         staticProperties: any[];
 477 | 
 478 |         staticStride: number;
 479 |         staticBuffer: any;
 480 |         staticData: any;
 481 |         dynamicStride: number;
 482 |         dynamicBuffer: any;
 483 |         dynamicData: any;
 484 | 
 485 |         initBuffers(): void;
 486 |         bind(): void;
 487 |         destroy(): void;
 488 | 
 489 |     }
 490 |     export interface ParticleRenderer {
 491 | 
 492 |     }
 493 |     export interface ParticleShader {
 494 | 
 495 |     }
 496 | 
 497 |     //renderers
 498 | 
 499 |     export interface RendererOptions {
 500 | 
 501 |         view?: HTMLCanvasElement;
 502 |         transparent?: boolean
 503 |         antialias?: boolean;
 504 |         resolution?: number;
 505 |         clearBeforeRendering?: boolean;
 506 |         preserveDrawingBuffer?: boolean;
 507 |         forceFXAA?: boolean;
 508 |         roundPixels?: boolean;
 509 |         backgroundColor?: number;
 510 |     }
 511 |     export class SystemRenderer extends EventEmitter {
 512 | 
 513 |         protected _backgroundColor: number;
 514 |         protected _backgroundColorRgb: number[];
 515 |         protected _backgroundColorString: string;
 516 |         protected _tempDisplayObjectParent: any;
 517 |         protected _lastObjectRendered: DisplayObject;
 518 | 
 519 |         constructor(system: string, width?: number, height?: number, options?: RendererOptions);
 520 | 
 521 |         type: number;
 522 |         width: number;
 523 |         height: number;
 524 |         view: HTMLCanvasElement;
 525 |         resolution: number;
 526 |         transparent: boolean;
 527 |         autoResize: boolean;
 528 |         blendModes: any; //todo?
 529 |         preserveDrawingBuffer: boolean;
 530 |         clearBeforeRender: boolean;
 531 |         backgroundColor: number;
 532 | 
 533 |         render(object: DisplayObject): void;
 534 |         resize(width: number, height: number): void;
 535 |         destroy(removeView?: boolean): void;
 536 | 
 537 |     }
 538 |     export class CanvasRenderer extends SystemRenderer {
 539 | 
 540 |         protected renderDisplayObject(displayObject: DisplayObject, context: CanvasRenderingContext2D): void;
 541 |         protected _mapBlendModes(): void;
 542 | 
 543 |         constructor(width?: number, height?: number, options?: RendererOptions);
 544 | 
 545 |         context: CanvasRenderingContext2D;
 546 |         refresh: boolean;
 547 |         maskManager: CanvasMaskManager;
 548 |         roundPixels: boolean;
 549 |         smoothProperty: string;
 550 | 
 551 |         render(object: DisplayObject): void;
 552 |         resize(w: number, h: number): void;
 553 | 
 554 |     }
 555 |     export class CanvasBuffer {
 556 | 
 557 |         protected clear(): void;
 558 | 
 559 |         constructor(width: number, height: number);
 560 | 
 561 |         canvas: HTMLCanvasElement;
 562 |         context: CanvasRenderingContext2D;
 563 | 
 564 |         width: number;
 565 |         height: number;
 566 | 
 567 |         resize(width: number, height: number): void;
 568 |         destroy(): void;
 569 | 
 570 |     }
 571 |     export class CanvasGraphics {
 572 | 
 573 |         static renderGraphicsMask(graphics: Graphics, context: CanvasRenderingContext2D): void;
 574 |         static updateGraphicsTint(graphics: Graphics): void;
 575 | 
 576 |         static renderGraphics(graphics: Graphics, context: CanvasRenderingContext2D): void;
 577 | 
 578 |     }
 579 |     export class CanvasMaskManager {
 580 | 
 581 |         pushMask(maskData: any, renderer: WebGLRenderer | CanvasRenderer): void;
 582 |         popMask(renderer: WebGLRenderer | CanvasRenderer): void;
 583 |         destroy(): void;
 584 | 
 585 |     }
 586 |     export class CanvasTinter {
 587 | 
 588 |         static getTintedTexture(sprite: DisplayObject, color: number): HTMLCanvasElement;
 589 |         static tintWithMultiply(texture: Texture, color: number, canvas: HTMLDivElement): void;
 590 |         static tintWithOverlay(texture: Texture, color: number, canvas: HTMLCanvasElement): void;
 591 |         static tintWithPerPixel(texture: Texture, color: number, canvas: HTMLCanvasElement): void;
 592 |         static roundColor(color: number): number;
 593 |         static cacheStepsPerColorChannel: number;
 594 |         static convertTintToImage: boolean;
 595 |         static vanUseMultiply: boolean;
 596 |         static tintMethod: Function;
 597 | 
 598 |     }
 599 |     export class WebGLRenderer extends SystemRenderer {
 600 | 
 601 |         protected _useFXAA: boolean;
 602 |         protected _FXAAFilter: filters.FXAAFilter;
 603 |         protected _contextOptions: {
 604 |             alpha: boolean;
 605 |             antiAlias: boolean;
 606 |             premultipliedAlpha: boolean;
 607 |             stencil: boolean;
 608 |             preseveDrawingBuffer: boolean;
 609 |         }
 610 |         protected _renderTargetStack: RenderTarget[];
 611 | 
 612 |         protected _initContext(): void;
 613 |         protected _createContext(): void;
 614 |         protected handleContextLost: (event: WebGLContextEvent) => void;
 615 |         protected _mapGlModes(): void;
 616 | 
 617 |         constructor(width?: number, height?: number, options?: RendererOptions);
 618 | 
 619 |         drawCount: number;
 620 |         shaderManager: ShaderManager;
 621 |         maskManager: MaskManager;
 622 |         stencilManager: StencilManager;
 623 |         filterManager: FilterManager;
 624 |         blendModeManager: BlendModeManager;
 625 |         currentRenderTarget: RenderTarget;
 626 |         currentRenderer: ObjectRenderer;
 627 | 
 628 |         render(object: DisplayObject): void;
 629 |         renderDisplayObject(displayObject: DisplayObject, renderTarget: RenderTarget, clear: boolean): void;
 630 |         setObjectRenderer(objectRenderer: ObjectRenderer): void;
 631 |         setRenderTarget(renderTarget: RenderTarget): void;
 632 |         updateTexture(texture: BaseTexture | Texture): BaseTexture | Texture;
 633 |         destroyTexture(texture: BaseTexture | Texture): void;
 634 | 
 635 |     }
 636 |     export class AbstractFilter {
 637 | 
 638 |         protected vertexSrc: string[];
 639 |         protected fragmentSrc: string[];
 640 | 
 641 |         constructor(vertexSrc?: string | string[], fragmentSrc?: string | string[], uniforms?: any);
 642 | 
 643 |         uniforms: any;
 644 | 
 645 |         padding: number;
 646 | 
 647 |         getShader(renderer: WebGLRenderer): Shader;
 648 |         applyFilter(renderer: WebGLRenderer, input: RenderTarget, output: RenderTarget, clear?: boolean): void;
 649 |         syncUniform(uniform: WebGLUniformLocation): void;
 650 | 
 651 |     }
 652 |     export class SpriteMaskFilter extends AbstractFilter {
 653 | 
 654 |         constructor(sprite: Sprite);
 655 | 
 656 |         maskSprite: Sprite;
 657 |         maskMatrix: Matrix;
 658 | 
 659 |         applyFilter(renderer: WebGLRenderbuffer, input: RenderTarget, output: RenderTarget): void;
 660 |         map: Texture;
 661 |         offset: Point;
 662 | 
 663 |     }
 664 |     export class BlendModeManager extends WebGLManager {
 665 | 
 666 |         constructor(renderer: WebGLRenderer);
 667 | 
 668 |         setBlendMode(blendMode: number): boolean;
 669 | 
 670 |     }
 671 | 
 672 |     export class FilterManager extends WebGLManager {
 673 | 
 674 |         constructor(renderer: WebGLRenderer);
 675 | 
 676 |         filterStack: any[];
 677 |         renderer: WebGLRenderer;
 678 |         texturePool: any[];
 679 | 
 680 |         onContextChange: () => void;
 681 |         setFilterStack(filterStack: any[]): void;
 682 |         pushFilter(target: RenderTarget, filters: any[]): void;
 683 |         popFilter(): AbstractFilter;
 684 |         getRenderTarget(clear?: boolean): RenderTarget;
 685 |         protected returnRenderTarget(renderTarget: RenderTarget): void;
 686 |         applyFilter(shader: Shader, inputTarget: RenderTarget, outputTarget: RenderTarget, clear?: boolean): void;
 687 |         calculateMappedMatrix(filterArea: Rectangle, sprite: Sprite, outputMatrix?: Matrix): Matrix;
 688 |         capFilterArea(filterArea: Rectangle): void;
 689 |         resize(width: number, height: number): void;
 690 |         destroy(): void;
 691 | 
 692 |     }
 693 | 
 694 |     export class MaskManager extends WebGLManager {
 695 | 
 696 |         stencilStack: StencilMaskStack;
 697 |         reverse: boolean;
 698 |         count: number;
 699 |         alphaMaskPool: any[];
 700 | 
 701 |         pushMask(target: RenderTarget, maskData: any): void;
 702 |         popMask(target: RenderTarget, maskData: any): void;
 703 |         pushSpriteMask(target: RenderTarget, maskData: any): void;
 704 |         popSpriteMask(): void;
 705 |         pushStencilMask(target: RenderTarget, maskData: any): void;
 706 |         popStencilMask(target: RenderTarget, maskData: any): void;
 707 | 
 708 |     }
 709 |     export class ShaderManager extends WebGLManager {
 710 | 
 711 |         protected _currentId: number;
 712 |         protected currentShader: Shader;
 713 | 
 714 |         constructor(renderer: WebGLRenderer);
 715 | 
 716 |         maxAttibs: number;
 717 |         attribState: any[];
 718 |         tempAttribState: any[];
 719 |         stack: any[];
 720 | 
 721 |         setAttribs(attribs: any[]): void;
 722 |         setShader(shader: Shader): boolean;
 723 |         destroy(): void;
 724 | 
 725 |     }
 726 |     export class StencilManager extends WebGLManager {
 727 | 
 728 |         constructor(renderer: WebGLRenderer);
 729 | 
 730 |         setMaskStack(stencilMaskStack: StencilMaskStack): void;
 731 |         pushStencil(graphics: Graphics, webGLData: WebGLGraphicsData): void;
 732 |         bindGraphics(graphics: Graphics, webGLData: WebGLGraphicsData): void;
 733 |         popStencil(graphics: Graphics, webGLData: WebGLGraphicsData): void;
 734 |         destroy(): void;
 735 |         pushMask(maskData: any[]): void;
 736 |         popMask(maskData: any[]): void;
 737 | 
 738 |     }
 739 |     export class WebGLManager {
 740 | 
 741 |         protected onContextChange: () => void;
 742 | 
 743 |         constructor(renderer: WebGLRenderer);
 744 | 
 745 |         renderer: WebGLRenderer;
 746 | 
 747 |         destroy(): void;
 748 | 
 749 |     }
 750 |     export class Shader {
 751 | 
 752 |         protected attributes: any;
 753 |         protected textureCount: number;
 754 |         protected uniforms: any;
 755 | 
 756 |         protected _glCompile(type: any, src: any): Shader;
 757 | 
 758 |         constructor(shaderManager: ShaderManager, vertexSrc: string, fragmentSrc: string, uniforms: any, attributes: any);
 759 | 
 760 |         uuid: number;
 761 |         gl: WebGLRenderingContext;
 762 |         shaderManager: ShaderManager;
 763 |         program: WebGLProgram;
 764 |         vertexSrc: string;
 765 |         fragmentSrc: string;
 766 | 
 767 |         init(): void;
 768 |         cachUniformLocations(keys: string): void;
 769 |         cacheAttributeLocations(keys: string): void;
 770 |         compile(): WebGLProgram;
 771 |         syncUniform(uniform: any): void;
 772 |         syncUniforms(): void;
 773 |         initSampler2D(uniform: any): void;
 774 |         destroy(): void;
 775 | 
 776 |     }
 777 |     export class ComplexPrimitiveShader extends Shader {
 778 | 
 779 |         constructor(shaderManager: ShaderManager);
 780 | 
 781 |     }
 782 |     export class PrimitiveShader extends Shader {
 783 | 
 784 |         constructor(shaderManager: ShaderManager);
 785 | 
 786 |     }
 787 |     export class TextureShader extends Shader {
 788 | 
 789 |         constructor(shaderManager: ShaderManager, vertexSrc?: string, fragmentSrc?: string, customUniforms?: any, customAttributes?: any);
 790 | 
 791 |     }
 792 |     export interface StencilMaskStack {
 793 | 
 794 |         stencilStack: any[];
 795 |         reverse: boolean;
 796 |         count: number;
 797 | 
 798 |     }
 799 |     export class ObjectRenderer extends WebGLManager {
 800 | 
 801 |         start(): void;
 802 |         stop(): void;
 803 |         flush(): void;
 804 |         render(object?: any): void;
 805 | 
 806 |     }
 807 |     export class RenderTarget {
 808 | 
 809 |         constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number, resolution: number, root: boolean);
 810 | 
 811 |         gl: WebGLRenderingContext;
 812 |         frameBuffer: WebGLFramebuffer;
 813 |         texture: Texture;
 814 |         size: Rectangle;
 815 |         resolution: number;
 816 |         projectionMatrix: Matrix;
 817 |         transform: Matrix;
 818 |         frame: Rectangle;
 819 |         stencilBuffer: WebGLRenderbuffer;
 820 |         stencilMaskStack: StencilMaskStack;
 821 |         filterStack: any[];
 822 |         scaleMode: number;
 823 |         root: boolean;
 824 | 
 825 |         clear(bind?: boolean): void;
 826 |         attachStencilBuffer(): void;
 827 |         activate(): void;
 828 |         calculateProjection(protectionFrame: Matrix): void;
 829 |         resize(width: number, height: number): void;
 830 |         destroy(): void;
 831 | 
 832 |     }
 833 |     export interface Quad {
 834 | 
 835 |         gl: WebGLRenderingContext;
 836 |         vertices: number[];
 837 |         uvs: number[];
 838 |         colors: number[];
 839 |         indices: number[];
 840 |         vertexBuffer: WebGLBuffer;
 841 |         indexBuffer: WebGLBuffer;
 842 | 
 843 |         map(rect: Rectangle, rect2: Rectangle): void;
 844 |         upload(): void;
 845 | 
 846 |     }
 847 | 
 848 |     //sprites
 849 | 
 850 |     export class Sprite extends Container {
 851 | 
 852 |         static fromFrame(frameId: string): Sprite;
 853 |         static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite;
 854 | 
 855 |         protected _texture: Texture;
 856 |         protected _width: number;
 857 |         protected _height: number;
 858 |         protected cachedTint: number;
 859 | 
 860 |         protected _onTextureUpdate(): void;
 861 | 
 862 |         constructor(texture?: Texture);
 863 | 
 864 |         anchor: Point;
 865 |         tint: number;
 866 |         blendMode: number;
 867 |         shader: Shader;
 868 |         texture: Texture;
 869 | 
 870 |         width: number;
 871 |         height: number;
 872 | 
 873 |         getBounds(matrix?: Matrix): Rectangle;
 874 |         getLocalBounds(): Rectangle;
 875 |         containsPoint(point: Point): boolean;
 876 |         destroy(destroyTexture?: boolean, destroyBaseTexture?: boolean): void;
 877 | 
 878 |     }
 879 |     export class SpriteRenderer extends ObjectRenderer {
 880 | 
 881 |         protected renderBatch(texture: Texture, size: number, startIndex: number): void;
 882 | 
 883 |         vertSize: number;
 884 |         vertByteSize: number;
 885 |         size: number;
 886 |         vertices: number[];
 887 |         positions: number[];
 888 |         colors: number[];
 889 |         indices: number[];
 890 |         currentBatchSize: number;
 891 |         sprites: Sprite[];
 892 |         shader: Shader;
 893 | 
 894 |         render(sprite: Sprite): void;
 895 |         flush(): void;
 896 |         start(): void;
 897 |         destroy(): void;
 898 | 
 899 |     }
 900 | 
 901 |     //text
 902 | 
 903 |     export interface TextStyle {
 904 | 
 905 |         font?: string;
 906 |         fill?: string | number;
 907 |         align?: string;
 908 |         stroke?: string | number;
 909 |         strokeThickness?: number;
 910 |         wordWrap?: boolean;
 911 |         wordWrapWidth?: number;
 912 |         lineHeight?: number;
 913 |         dropShadow?: boolean;
 914 |         dropShadowColor?: string | number;
 915 |         dropShadowAngle?: number;
 916 |         dropShadowDistance?: number;
 917 |         padding?: number;
 918 |         textBaseline?: string;
 919 |         lineJoin?: string;
 920 |         miterLimit?: number;
 921 | 
 922 |     }
 923 |     export class Text extends Sprite {
 924 | 
 925 |         static fontPropertiesCache: any;
 926 |         static fontPropertiesCanvas: HTMLCanvasElement;
 927 |         static fontPropertiesContext: CanvasRenderingContext2D;
 928 | 
 929 |         protected _text: string;
 930 |         protected _style: TextStyle;
 931 | 
 932 |         protected updateText(): void;
 933 |         protected updateTexture(): void;
 934 |         protected determineFontProperties(fontStyle: TextStyle): TextStyle;
 935 |         protected wordWrap(text: string): boolean;
 936 | 
 937 |         constructor(text?: string, style?: TextStyle, resolution?: number);
 938 | 
 939 |         canvas: HTMLCanvasElement;
 940 |         context: CanvasRenderingContext2D;
 941 |         dirty: boolean;
 942 |         resolution: number;
 943 |         text: string;
 944 |         style: TextStyle;
 945 | 
 946 |         width: number;
 947 |         height: number;
 948 | 
 949 |     }
 950 | 
 951 |     //textures
 952 | 
 953 |     export class BaseTexture extends EventEmitter {
 954 | 
 955 |         static fromImage(imageUrl: string, crossorigin?: boolean, scaleMode?: number): BaseTexture;
 956 |         static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): BaseTexture;
 957 | 
 958 |         protected _glTextures: any[];
 959 | 
 960 |         protected _sourceLoaded(): void;
 961 | 
 962 |         constructor(source: HTMLImageElement | HTMLCanvasElement, scaleMode?: number, resolution?: number);
 963 | 
 964 |         uuid: number;
 965 |         resolution: number;
 966 |         width: number;
 967 |         height: number;
 968 |         realWidth: number;
 969 |         realHeight: number;
 970 |         scaleMode: number;
 971 |         hasLoaded: boolean;
 972 |         isLoading: boolean;
 973 |         source: HTMLImageElement | HTMLCanvasElement;
 974 |         premultipliedAlpha: boolean;
 975 |         imageUrl: string;
 976 |         isPowerOfTwo: boolean;
 977 |         mipmap: boolean;
 978 | 
 979 |         update(): void;
 980 |         loadSource(source: HTMLImageElement | HTMLCanvasElement): void;
 981 |         destroy(): void;
 982 |         dispose(): void;
 983 |         updateSourceImage(newSrc: string): void;
 984 | 
 985 |         on(event: 'dispose', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
 986 |         on(event: 'error', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
 987 |         on(event: 'loaded', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
 988 |         on(event: 'update', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
 989 |         on(event: string, fn: Function, context?: any): EventEmitter;
 990 | 
 991 |         once(event: 'dispose', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
 992 |         once(event: 'error', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
 993 |         once(event: 'loaded', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
 994 |         once(event: 'update', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
 995 |         once(event: string, fn: Function, context?: any): EventEmitter;
 996 | 
 997 |     }
 998 |     export class RenderTexture extends Texture {
 999 | 
1000 |         protected renderWebGL(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void;
1001 |         protected renderCanvas(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void;
1002 | 
1003 |         constructor(renderer: CanvasRenderer | WebGLRenderer, width?: number, height?: number, scaleMode?: number, resolution?: number);
1004 | 
1005 |         width: number;
1006 |         height: number;
1007 |         resolution: number;
1008 |         renderer: CanvasRenderer | WebGLRenderer;
1009 |         valid: boolean;
1010 | 
1011 |         render(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void;
1012 |         resize(width: number, height: number, updateBase?: boolean): void;
1013 |         clear(): void;
1014 |         destroy(): void;
1015 |         getImage(): HTMLImageElement;
1016 |         getPixels(): number[];
1017 |         getPixel(x: number, y: number): number[];
1018 |         getBase64(): string;
1019 |         getCanvas(): HTMLCanvasElement;
1020 | 
1021 |     }
1022 |     export class Texture extends BaseTexture {
1023 | 
1024 |         static fromImage(imageUrl: string, crossOrigin?: boolean, scaleMode?: number): Texture;
1025 |         static fromFrame(frameId: string): Texture;
1026 |         static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): Texture;
1027 |         static fromVideo(video: HTMLVideoElement | string, scaleMode?: number): Texture;
1028 |         static fromVideoUrl(videoUrl: string, scaleMode?: number): Texture;
1029 |         static addTextureToCache(texture: Texture, id: string): void;
1030 |         static removeTextureFromCache(id: string): Texture;
1031 |         static EMPTY: Texture;
1032 | 
1033 |         protected _frame: Rectangle;
1034 |         protected _uvs: TextureUvs;
1035 | 
1036 |         protected onBaseTextureUpdated(baseTexture: BaseTexture): void;
1037 |         protected onBaseTextureLoaded(baseTexture: BaseTexture): void;
1038 |         protected _updateUvs(): void;
1039 | 
1040 |         constructor(baseTexture: BaseTexture, frame?: Rectangle, crop?: Rectangle, trim?: Rectangle, rotate?: boolean);
1041 | 
1042 |         noFrame: boolean;
1043 |         baseTexture: BaseTexture;
1044 |         trim: Rectangle;
1045 |         valid: boolean;
1046 |         requiresUpdate: boolean;
1047 |         width: number;
1048 |         height: number;
1049 |         crop: Rectangle;
1050 |         rotate: boolean;
1051 | 
1052 |         frame: Rectangle;
1053 | 
1054 |         update(): void;
1055 |         destroy(destroyBase?: boolean): void;
1056 |         clone(): Texture;
1057 | 
1058 |     }
1059 |     export class TextureUvs {
1060 | 
1061 |         x0: number;
1062 |         y0: number;
1063 |         x1: number;
1064 |         y1: number;
1065 |         x2: number;
1066 |         y2: number;
1067 |         x3: number;
1068 |         y3: number;
1069 | 
1070 |         set(frame: Rectangle, baseFrame: Rectangle, rotate: boolean): void;
1071 | 
1072 |     }
1073 |     export class VideoBaseTexture extends BaseTexture {
1074 | 
1075 |         static fromVideo(video: HTMLVideoElement, scaleMode?: number): VideoBaseTexture;
1076 |         static fromUrl(videoSrc: string | any | string[]| any[]): VideoBaseTexture;
1077 | 
1078 |         protected _loaded: boolean;
1079 | 
1080 |         protected _onUpdate(): void;
1081 |         protected _onPlayStart(): void;
1082 |         protected _onPlayStop(): void;
1083 |         protected _onCanPlay(): void;
1084 | 
1085 |         constructor(source: HTMLVideoElement, scaleMode?: number);
1086 | 
1087 |         autoUpdate: boolean;
1088 | 
1089 |         destroy(): void;
1090 | 
1091 |     }
1092 | 
1093 |     //utils
1094 | 
1095 |     export class utils {
1096 | 
1097 |         static uuid(): number;
1098 |         static hex2rgb(hex: number, out?: number[]): number[];
1099 |         static hex2String(hex: number): string;
1100 |         static rbg2hex(rgb: Number[]): number;
1101 |         static canUseNewCanvasBlendModel(): boolean;
1102 |         static getNextPowerOfTwo(number: number): number;
1103 |         static isPowerOfTwo(width: number, height: number): boolean;
1104 |         static getResolutionOfUrl(url: string): boolean;
1105 |         static sayHello(type: string): void;
1106 |         static isWebGLSupported(): boolean;
1107 |         static sign(n: number): number;
1108 |         static TextureCache: any;
1109 |         static BaseTextureCache: any;
1110 | 
1111 |     }
1112 | 
1113 |     //////////////////////////////////////////////////////////////////////////////
1114 |     ////////////////////////////EXTRAS////////////////////////////////////////////
1115 |     //////////////////////////////////////////////////////////////////////////////
1116 | 
1117 |     export module extras {
1118 | 
1119 |         export interface BitmapTextStyle {
1120 | 
1121 |             font?: string | {
1122 | 
1123 |                 name?: string;
1124 |                 size?: number;
1125 | 
1126 |             };
1127 |             align?: string;
1128 |             tint?: number;
1129 | 
1130 |         }
1131 |         export class BitmapText extends Container {
1132 | 
1133 |             static fonts: any;
1134 | 
1135 |             protected _glyphs: Sprite[];
1136 |             protected _font: string | {
1137 |                 tint: number;
1138 |                 align: string;
1139 |                 name: string;
1140 |                 size: number;
1141 |             }
1142 |             protected _text: string;
1143 | 
1144 |             protected updateText(): void;
1145 | 
1146 |             constructor(text: string, style?: BitmapTextStyle);
1147 | 
1148 |             textWidth: number;
1149 |             textHeight: number;
1150 |             maxWidth: number;
1151 |             maxLineHeight: number;
1152 |             dirty: boolean;
1153 | 
1154 |             tint: number;
1155 |             align: string;
1156 |             font: string | {
1157 |                 tint: number;
1158 |                 align: string;
1159 |                 name: string;
1160 |                 size: number;
1161 |             }
1162 |             text: string;
1163 | 
1164 |         }
1165 |         export class MovieClip extends Sprite {
1166 | 
1167 |             static fromFrames(frame: string[]): MovieClip;
1168 |             static fromImages(images: string[]): MovieClip;
1169 | 
1170 |             protected _textures: Texture[];
1171 |             protected _durations: number[];
1172 |             protected _currentTime: number;
1173 | 
1174 |             protected update(deltaTime: number): void;
1175 | 
1176 |             constructor(textures: Texture[]);
1177 | 
1178 |             animationSpeed: number;
1179 |             loop: boolean;
1180 |             onComplete: () => void;
1181 |             currentFrame: number;
1182 |             playing: boolean;
1183 | 
1184 |             totalFrames: number;
1185 |             textures: Texture[];
1186 | 
1187 |             stop(): void;
1188 |             play(): void;
1189 |             gotoAndStop(frameName: number): void;
1190 |             gotoAndPlay(frameName: number): void;
1191 |             destroy(): void;
1192 | 
1193 |         }
1194 |         export class TilingSprite extends Sprite {
1195 | 
1196 |             //This is really unclean but is the only way :(
1197 |             //See http://stackoverflow.com/questions/29593905/typescript-declaration-extending-class-with-static-method/29595798#29595798
1198 |             //Thanks bas!
1199 |             static fromFrame(frameId: string): Sprite;
1200 |             static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite;
1201 | 
1202 |             static fromFrame(frameId: string, width?: number, height?: number): TilingSprite;
1203 |             static fromImage(imageId: string, width?: number, height?: number, crossorigin?: boolean, scaleMode?: number): TilingSprite;
1204 | 
1205 |             protected _tileScaleOffset: Point;
1206 |             protected _tilingTexture: boolean;
1207 |             protected _refreshTexture: boolean;
1208 |             protected _uvs: TextureUvs[];
1209 | 
1210 |             constructor(texture: Texture, width: number, height: number);
1211 | 
1212 |             tileScale: Point;
1213 |             tilePosition: Point;
1214 | 
1215 |             width: number;
1216 |             height: number;
1217 |             originalTexture: Texture;
1218 | 
1219 |             getBounds(): Rectangle;
1220 |             generateTilingTexture(renderer: WebGLRenderer | CanvasRenderer, texture: Texture, forcePowerOfTwo?: boolean): Texture;
1221 |             containsPoint(point: Point): boolean;
1222 |             destroy(): void;
1223 | 
1224 |         }
1225 | 
1226 |     }
1227 | 
1228 |     //////////////////////////////////////////////////////////////////////////////
1229 |     ///////////////////////////////FILTERS////////////////////////////////////////
1230 |     //////////////////////////////////////////////////////////////////////////////
1231 | 
1232 |     module filters {
1233 | 
1234 |         export class AsciiFilter extends AbstractFilter {
1235 |             size: number;
1236 |         }
1237 |         export class BloomFilter extends AbstractFilter {
1238 | 
1239 |             blur: number;
1240 |             blurX: number;
1241 |             blurY: number;
1242 | 
1243 |         }
1244 |         export class BlurFilter extends AbstractFilter {
1245 | 
1246 |             protected blurXFilter: BlurXFilter;
1247 |             protected blurYFilter: BlurYFilter;
1248 | 
1249 |             blur: number;
1250 |             passes: number;
1251 |             blurX: number;
1252 |             blurY: number;
1253 | 
1254 |         }
1255 |         export class BlurXFilter extends AbstractFilter {
1256 | 
1257 |             passes: number;
1258 |             strength: number;
1259 |             blur: number;
1260 | 
1261 |         }
1262 |         export class BlurYFilter extends AbstractFilter {
1263 | 
1264 |             passes: number;
1265 |             strength: number;
1266 |             blur: number;
1267 | 
1268 |         }
1269 |         export class SmartBlurFilter extends AbstractFilter {
1270 | 
1271 |         }
1272 |         export class ColorMatrixFilter extends AbstractFilter {
1273 | 
1274 |             protected _loadMatrix(matrix: number[], multiply: boolean): void;
1275 |             protected _multiply(out: number[], a: number[], b: number[]): void;
1276 |             protected _colorMatrix(matrix: number[]): void;
1277 | 
1278 |             matrix: number[];
1279 | 
1280 |             brightness(b: number, multiply?: boolean): void;
1281 |             greyscale(scale: number, multiply?: boolean): void;
1282 |             blackAndWhite(multiply?: boolean): void;
1283 |             hue(rotation: number, multiply?: boolean): void;
1284 |             contrast(amount: number, multiply?: boolean): void;
1285 |             saturate(amount: number, multiply?: boolean): void;
1286 |             desaturate(multiply?: boolean): void;
1287 |             negative(multiply?: boolean): void;
1288 |             sepia(multiply?: boolean): void;
1289 |             technicolor(multiply?: boolean): void;
1290 |             polaroid(multiply?: boolean): void;
1291 |             toBGR(multiply?: boolean): void;
1292 |             kodachrome(multiply?: boolean): void;
1293 |             browni(multiply?: boolean): void;
1294 |             vintage(multiply?: boolean): void;
1295 |             colorTone(desaturation: number, toned: number, lightColor: string, darkColor: string, multiply?: boolean): void;
1296 |             night(intensity: number, multiply?: boolean): void;
1297 |             predator(amount: number, multiply?: boolean): void;
1298 |             lsd(multiply?: boolean): void;
1299 |             reset(): void;
1300 | 
1301 |         }
1302 |         export class ColorStepFilter extends AbstractFilter {
1303 | 
1304 |             step: number;
1305 | 
1306 |         }
1307 |         export class ConvolutionFilter extends AbstractFilter {
1308 | 
1309 |             constructor(matrix: number[], width: number, height: number);
1310 | 
1311 |             matrix: number[];
1312 |             width: number;
1313 |             height: number;
1314 | 
1315 |         }
1316 |         export class CrossHatchFilter extends AbstractFilter {
1317 | 
1318 |         }
1319 |         export class DisplacementFilter extends AbstractFilter {
1320 | 
1321 |             constructor(sprite: Sprite, scale?: number);
1322 | 
1323 |             map: Texture;
1324 | 
1325 |             scale: Point;
1326 | 
1327 |         }
1328 |         export class DotScreenFilter extends AbstractFilter {
1329 | 
1330 |             scale: number;
1331 |             angle: number;
1332 | 
1333 |         }
1334 |         export class BlurYTintFilter extends AbstractFilter {
1335 | 
1336 |             blur: number;
1337 | 
1338 |         }
1339 |         export class DropShadowFilter extends AbstractFilter {
1340 | 
1341 |             blur: number;
1342 |             blurX: number;
1343 |             blurY: number;
1344 |             color: number;
1345 |             alpha: number;
1346 |             distance: number;
1347 |             angle: number;
1348 | 
1349 |         }
1350 |         export class GrayFilter extends AbstractFilter {
1351 | 
1352 |             gray: number;
1353 | 
1354 |         }
1355 |         export class InvertFilter extends AbstractFilter {
1356 | 
1357 |             invert: number;
1358 | 
1359 |         }
1360 |         export class NoiseFilter extends AbstractFilter {
1361 | 
1362 |             noise: number;
1363 | 
1364 |         }
1365 |         export class PixelateFilter extends AbstractFilter {
1366 | 
1367 |             size: Point;
1368 | 
1369 |         }
1370 |         export class RGBSplitFilter extends AbstractFilter {
1371 | 
1372 |             red: number;
1373 |             green: number;
1374 |             blue: number;
1375 | 
1376 |         }
1377 |         export class SepiaFilter extends AbstractFilter {
1378 | 
1379 |             sepia: number;
1380 | 
1381 |         }
1382 |         export class ShockwaveFilter extends AbstractFilter {
1383 | 
1384 |             center: number[];
1385 |             params: any;
1386 |             time: number;
1387 | 
1388 |         }
1389 |         export class TiltShiftAxisFilter extends AbstractFilter {
1390 | 
1391 |             blur: number;
1392 |             gradientBlur: number;
1393 |             start: number;
1394 |             end: number;
1395 | 
1396 |             updateDelta(): void;
1397 | 
1398 |         }
1399 |         export class TiltShiftFilter extends AbstractFilter {
1400 | 
1401 |             blur: number;
1402 |             gradientBlur: number;
1403 |             start: number;
1404 |             end: number;
1405 | 
1406 |         }
1407 |         export class TiltShiftXFilter extends AbstractFilter {
1408 | 
1409 |             updateDelta(): void;
1410 | 
1411 |         }
1412 |         export class TiltShiftYFilter extends AbstractFilter {
1413 | 
1414 |             updateDelta(): void;
1415 | 
1416 |         }
1417 |         export class TwistFilter extends AbstractFilter {
1418 | 
1419 |             offset: Point;
1420 |             radius: number;
1421 |             angle: number;
1422 | 
1423 |         }
1424 |         export class FXAAFilter extends AbstractFilter {
1425 | 
1426 |             applyFilter(renderer: WebGLRenderer, input: RenderTarget, output: RenderTarget): void;
1427 | 
1428 |         }
1429 |     }
1430 | 
1431 |     //////////////////////////////////////////////////////////////////////////////
1432 |     ////////////////////////////INTERACTION///////////////////////////////////////
1433 |     //////////////////////////////////////////////////////////////////////////////
1434 | 
1435 |     export module interaction {
1436 | 
1437 |         export interface InteractionEvent {
1438 | 
1439 |             stopped: boolean;
1440 |             target: any;
1441 |             type: string;
1442 |             data: InteractionData;
1443 |             stopPropagation(): void;
1444 | 
1445 |         }
1446 | 
1447 |         export class InteractionData {
1448 | 
1449 |             global: Point;
1450 |             target: DisplayObject;
1451 |             originalEvent: Event;
1452 | 
1453 |             getLocalPosition(displayObject: DisplayObject, point?: Point, globalPos?: Point): Point;
1454 | 
1455 |         }
1456 | 
1457 |         export class InteractionManager {
1458 | 
1459 |             protected interactionDOMElement: HTMLElement;
1460 |             protected eventsAdded: boolean;
1461 |             protected _tempPoint: Point;
1462 | 
1463 |             protected setTargetElement(element: HTMLElement, resolution: number): void;
1464 |             protected addEvents(): void;
1465 |             protected removeEvents(): void;
1466 |             protected dispatchEvent(displayObject: DisplayObject, eventString: string, eventData: any): void;
1467 |             protected onMouseDown: (event: Event) => void;
1468 |             protected processMouseDown: (displayObject: DisplayObject, hit: boolean) => void;
1469 |             protected onMouseUp: (event: Event) => void;
1470 |             protected processMouseUp: (displayObject: DisplayObject, hit: boolean) => void;
1471 |             protected onMouseMove: (event: Event) => void;
1472 |             protected processMouseMove: (displayObject: DisplayObject, hit: boolean) => void;
1473 |             protected onMouseOut: (event: Event) => void;
1474 |             protected processMouseOverOut: (displayObject: DisplayObject, hit: boolean) => void;
1475 |             protected onTouchStart: (event: Event) => void;
1476 |             protected processTouchStart: (DisplayObject: DisplayObject, hit: boolean) => void;
1477 |             protected onTouchEnd: (event: Event) => void;
1478 |             protected processTouchEnd: (displayObject: DisplayObject, hit: boolean) => void;
1479 |             protected onTouchMove: (event: Event) => void;
1480 |             protected processTouchMove: (displayObject: DisplayObject, hit: boolean) => void;
1481 |             protected getTouchData(touchEvent: InteractionData): InteractionData;
1482 |             protected returnTouchData(touchData: InteractionData): void;
1483 | 
1484 |             constructor(renderer: CanvasRenderer | WebGLRenderer, options?: { autoPreventDefault?: boolean; interactionFrequence?: number; });
1485 | 
1486 |             renderer: CanvasRenderer | WebGLRenderer;
1487 |             autoPreventDefault: boolean;
1488 |             interactionFrequency: number;
1489 |             mouse: InteractionData;
1490 |             eventData: {
1491 |                 stopped: boolean;
1492 |                 target: any;
1493 |                 type: any;
1494 |                 data: InteractionData;
1495 |             };
1496 |             interactiveDataPool: InteractionData[];
1497 |             last: number;
1498 |             currentCursorStyle: string;
1499 |             resolution: number;
1500 |             update(deltaTime: number): void;
1501 | 
1502 |             mapPositionToPoint(point: Point, x: number, y: number): void;
1503 |             processInteractive(point: Point, displayObject: DisplayObject, func: (displayObject: DisplayObject, hit: boolean) => void, hitTest: boolean, interactive: boolean): boolean;
1504 |             destroy(): void;
1505 | 
1506 |         }
1507 | 
1508 |         export interface InteractiveTarget {
1509 | 
1510 |             interactive: boolean;
1511 |             buttonMode: boolean;
1512 |             interactiveChildren: boolean;
1513 |             defaultCursor: string;
1514 |             hitArea: HitArea;
1515 | 
1516 |         }
1517 | 
1518 |     }
1519 | 
1520 |     //////////////////////////////////////////////////////////////////////////////
1521 |     ///////////////////////////////LOADER/////////////////////////////////////////
1522 |     //////////////////////////////////////////////////////////////////////////////
1523 |     //https://github.com/englercj/resource-loader/blob/master/src/Loader.js
1524 | 
1525 |     export module loaders {
1526 |         export interface LoaderOptions {
1527 | 
1528 |             crossOrigin?: boolean;
1529 |             loadType?: number;
1530 |             xhrType?: string;
1531 | 
1532 |         }
1533 |         export class Loader extends EventEmitter {
1534 | 
1535 |             constructor(baseUrl?: string, concurrency?: number);
1536 | 
1537 |             baseUrl: string;
1538 |             progress: number;
1539 |             loading: boolean;
1540 |             resources: Resource[];
1541 | 
1542 |             add(name: string, url: string, options?: LoaderOptions, cb?: () => void): Loader;
1543 |             add(url: string, options?: LoaderOptions, cb?: () => void): Loader;
1544 |             //todo I am not sure of object literal notional (or its options) so just allowing any but would love to improve this
1545 |             add(obj: any, options?: LoaderOptions, cb?: () => void): Loader;
1546 | 
1547 |             on(event: 'complete', fn: (loader: loaders.Loader, object: any) => void, context?: any): EventEmitter;
1548 |             on(event: 'error', fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
1549 |             on(event: 'load', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
1550 |             on(event: 'progress', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
1551 |             on(event: 'start', fn: (loader: loaders.Loader) => void, context?: any): EventEmitter;
1552 |             on(event: string, fn: Function, context?: any): EventEmitter;
1553 | 
1554 |             once(event: 'complete', fn: (loader: loaders.Loader, object: any) => void, context?: any): EventEmitter;
1555 |             once(event: 'error', fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
1556 |             once(event: 'load', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
1557 |             once(event: 'progress', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
1558 |             once(event: 'start', fn: (loader: loaders.Loader) => void, context?: any): EventEmitter;
1559 |             once(event: string, fn: Function, context?: any): EventEmitter;
1560 | 
1561 |             before(fn: Function): Loader;
1562 |             pre(fn: Function): Loader;
1563 | 
1564 |             after(fn: Function): Loader;
1565 |             use(fn: Function): Loader;
1566 | 
1567 |             reset(): void;
1568 | 
1569 |             load(cb?: (loader: loaders.Loader, object: any) => void): Loader;
1570 | 
1571 |         }
1572 |         export class Resource extends EventEmitter {
1573 | 
1574 |             static LOAD_TYPE: {
1575 |                 XHR: number;
1576 |                 IMAGE: number;
1577 |                 AUDIO: number;
1578 |                 VIDEO: number;
1579 |             };
1580 | 
1581 |             static XHR_READ_STATE: {
1582 |                 UNSENT: number;
1583 |                 OPENED: number;
1584 |                 HEADERS_RECIEVED: number;
1585 |                 LOADING: number;
1586 |                 DONE: number;
1587 |             };
1588 | 
1589 |             static XHR_RESPONSE_TYPE: {
1590 |                 DEFAULT: number;
1591 |                 BUFFER: number;
1592 |                 BLOB: number;
1593 |                 DOCUMENT: number;
1594 |                 JSON: number;
1595 |                 TEXT: number;
1596 |             };
1597 | 
1598 |             constructor(name?: string, url?: string | string[], options?: LoaderOptions);
1599 | 
1600 |             name: string;
1601 |             texture: Texture;
1602 |             url: string;
1603 |             data: any;
1604 |             crossOrigin: string;
1605 |             loadType: number;
1606 |             xhrType: string;
1607 |             error: Error;
1608 |             xhr: XMLHttpRequest;
1609 | 
1610 |             complete(): void;
1611 |             load(cb?: () => void): void;
1612 | 
1613 |         }
1614 |     }
1615 | 
1616 |     //////////////////////////////////////////////////////////////////////////////
1617 |     ///////////////////////////////MESH///////////////////////////////////////////
1618 |     //////////////////////////////////////////////////////////////////////////////
1619 | 
1620 |     export module mesh {
1621 | 
1622 |         export class Mesh extends Container {
1623 | 
1624 |             static DRAW_MODES: {
1625 |                 TRIANGLE_MESH: number;
1626 |                 TRIANGLES: number;
1627 |             }
1628 | 
1629 |             constructor(texture: Texture, vertices?: number[], uvs?: number[], indices?: number[], drawMode?: number);
1630 | 
1631 |             texture: Texture;
1632 |             uvs: number[];
1633 |             vertices: number[];
1634 |             indices: number[];
1635 |             dirty: boolean;
1636 |             blendMode: number;
1637 |             canvasPadding: number;
1638 |             drawMode: number;
1639 | 
1640 |             getBounds(matrix?: Matrix): Rectangle;
1641 |             containsPoint(point: Point): boolean;
1642 | 
1643 |             protected _texture: Texture;
1644 | 
1645 |             protected _renderCanvasTriangleMesh(context: CanvasRenderingContext2D): void;
1646 |             protected _renderCanvasTriangles(context: CanvasRenderingContext2D): void;
1647 |             protected _renderCanvasDrawTriangle(context: CanvasRenderingContext2D, vertices: number, uvs: number, index0: number, index1: number, index2: number): void;
1648 |             protected renderMeshFlat(Mesh: Mesh): void;
1649 |             protected _onTextureUpdate(): void;
1650 | 
1651 |         }
1652 |         export class Rope extends Mesh {
1653 | 
1654 |             protected _ready: boolean;
1655 | 
1656 |             protected getTextureUvs(): TextureUvs;
1657 | 
1658 |             constructor(texture: Texture, points: Point[]);
1659 | 
1660 |             points: Point[];
1661 |             colors: number[];
1662 | 
1663 |             refresh(): void;
1664 | 
1665 |         }
1666 | 
1667 |         export class MeshRenderer extends ObjectRenderer {
1668 | 
1669 |             protected _initWebGL(mesh: Mesh): void;
1670 | 
1671 |             indices: number[];
1672 | 
1673 |             constructor(renderer: WebGLRenderer);
1674 | 
1675 |             render(mesh: Mesh): void;
1676 |             flush(): void;
1677 |             start(): void;
1678 |             destroy(): void;
1679 | 
1680 |         }
1681 | 
1682 |         export interface MeshShader extends Shader { }
1683 | 
1684 |     }
1685 | 
1686 |     module ticker {
1687 | 
1688 |         export var shared: Ticker;
1689 | 
1690 |         export class Ticker {
1691 | 
1692 |             protected _tick(time: number): void;
1693 |             protected _emitter: EventEmitter;
1694 |             protected _requestId: number;
1695 |             protected _maxElapsedMS: number;
1696 | 
1697 |             protected _requestIfNeeded(): void;
1698 |             protected _cancelIfNeeded(): void;
1699 |             protected _startIfPossible(): void;
1700 | 
1701 |             autoStart: boolean;
1702 |             deltaTime: number;
1703 |             elapsedMS: number;
1704 |             lastTime: number;
1705 |             speed: number;
1706 |             started: boolean;
1707 | 
1708 |             FPS: number;
1709 |             minFPS: number;
1710 | 
1711 |             add(fn: (deltaTime: number) => void, context?: any): Ticker;
1712 |             addOnce(fn: (deltaTime: number) => void, context?: any): Ticker;
1713 |             remove(fn: (deltaTime: number) => void, context?: any): Ticker;
1714 |             start(): void;
1715 |             stop(): void;
1716 |             update(): void;
1717 | 
1718 |         }
1719 | 
1720 |     }
1721 | }
1722 | 
1723 | declare module 'pixi.js' {
1724 |     export = PIXI;
1725 | }
1726 | 


--------------------------------------------------------------------------------
/pixi.js-tests.ts:
--------------------------------------------------------------------------------
   1 | /// <reference path="pixi.js.d.ts" />
   2 | module basics {
   3 | 
   4 |     export class Basics {
   5 | 
   6 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
   7 | 
   8 |         private stage: PIXI.Container;
   9 | 
  10 |         private bunny: PIXI.Sprite;
  11 | 
  12 |         constructor() {
  13 | 
  14 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
  15 |             document.body.appendChild(this.renderer.view);
  16 | 
  17 |             // create the root of the scene graph
  18 |             this.stage = new PIXI.Container();
  19 | 
  20 |             // create a texture from an image path
  21 |             var texture: PIXI.Texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png");
  22 | 
  23 |             // create a new Sprite using the texture
  24 |             this.bunny = new PIXI.Sprite(texture);
  25 | 
  26 |             // center the sprite's anchor point
  27 |             this.bunny.anchor.x = 0.5;
  28 |             this.bunny.anchor.y = 0.5;
  29 | 
  30 |             // move the sprite to the center of the screen
  31 |             this.bunny.position.x = 200;
  32 |             this.bunny.position.y = 150;
  33 | 
  34 |             //add it to the stage
  35 |             this.stage.addChild(this.bunny);
  36 | 
  37 |             this.animate();
  38 | 
  39 |         }
  40 | 
  41 |         private animate = (): void => {
  42 | 
  43 |             requestAnimationFrame(this.animate);
  44 | 
  45 |             this.bunny.rotation += 0.1;
  46 | 
  47 |             this.renderer.render(this.stage);
  48 | 
  49 |         }
  50 | 
  51 |     }
  52 | 
  53 | }
  54 | 
  55 | module basics {
  56 | 
  57 |     export class Click {
  58 | 
  59 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
  60 | 
  61 |         private stage: PIXI.Container;
  62 | 
  63 |         private sprite: PIXI.Sprite;
  64 | 
  65 |         constructor() {
  66 | 
  67 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
  68 |             document.body.appendChild(this.renderer.view);
  69 | 
  70 |             // create the root of the scene graph
  71 |             this.stage = new PIXI.Container();
  72 | 
  73 |             this.sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png');
  74 |             this.sprite.position.set(230, 264);
  75 |             this.sprite.interactive = true;
  76 |             this.sprite.on('mousedown', this.onDown, this);
  77 |             this.sprite.on('touchstart', this.onDown, this);
  78 | 
  79 |             //add it to the stage
  80 |             this.stage.addChild(this.sprite);
  81 | 
  82 |             //start animatng
  83 |             this.animate();
  84 | 
  85 |         }
  86 | 
  87 |         private onDown = (eventData: PIXI.interaction.InteractionData): void => {
  88 | 
  89 |             this.sprite.scale.x += 0.3;
  90 |             this.sprite.scale.y += 0.3;
  91 | 
  92 |         }
  93 | 
  94 |         private animate = (): void => {
  95 | 
  96 |             requestAnimationFrame(this.animate);
  97 | 
  98 |             this.renderer.render(this.stage);
  99 | 
 100 |         }
 101 | 
 102 |     }
 103 | 
 104 | }
 105 | 
 106 | module basics {
 107 | 
 108 |     export class Container {
 109 | 
 110 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 111 | 
 112 |         private stage: PIXI.Container;
 113 | 
 114 |         private container: PIXI.Container;
 115 | 
 116 |         constructor() {
 117 | 
 118 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 119 |             document.body.appendChild(this.renderer.view);
 120 | 
 121 |             // create the root of the scene graph
 122 |             this.stage = new PIXI.Container();
 123 | 
 124 |             this.container = new PIXI.Container();
 125 | 
 126 |             this.stage.addChild(this.container);
 127 | 
 128 |             for (var j = 0; j < 5; j++) {
 129 | 
 130 |                 for (var i = 0; i < 5; i++) {
 131 | 
 132 |                     var bunny: PIXI.Sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png');
 133 |                     bunny.x = 40 * i;
 134 |                     bunny.y = 40 * j;
 135 |                     this.container.addChild(bunny);
 136 | 
 137 |                 };
 138 | 
 139 |             };
 140 | 
 141 |             /*
 142 |              * All the bunnies are added to the container with the addChild method
 143 |              * when you do this, all the bunnies become children of the container, and when a container moves,
 144 |              * so do all its children.
 145 |              * This gives you a lot of flexibility and makes it easier to position elements on the screen
 146 |              */
 147 |             this.container.x = 100;
 148 |             this.container.y = 60;
 149 | 
 150 |             // start animating
 151 |             this.animate();
 152 | 
 153 |         }
 154 | 
 155 |         private animate = (): void => {
 156 | 
 157 |             requestAnimationFrame(this.animate);
 158 | 
 159 |             this.renderer.render(this.stage);
 160 | 
 161 |         }
 162 | 
 163 |     }
 164 | 
 165 | }
 166 | 
 167 | module basics {
 168 | 
 169 |     export class CustomFilter {
 170 | 
 171 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 172 | 
 173 |         private stage: PIXI.Container;
 174 | 
 175 |         private background: PIXI.Sprite;
 176 | 
 177 |         private filter: CustomizedFilter;
 178 | 
 179 |         constructor() {
 180 | 
 181 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 182 |             document.body.appendChild(this.renderer.view);
 183 | 
 184 |             // create the root of the scene graph
 185 |             this.stage = new PIXI.Container();
 186 | 
 187 |             this.background = PIXI.Sprite.fromImage('../../_assets/bkg-grass.jpg');
 188 |             this.background.scale.set(1.3, 1);
 189 |             this.stage.addChild(this.background);
 190 | 
 191 | 
 192 |             PIXI.loader.add('shader', '../../_assets/basics/shader.frag');
 193 |             PIXI.loader.once('complete', this.onLoaded, this);
 194 |             PIXI.loader.load();
 195 | 
 196 |         }
 197 | 
 198 |         private onLoaded(loader: PIXI.loaders.Loader, res: any) {
 199 | 
 200 |             var fragmentSrc = res.shader.data;
 201 | 
 202 |             this.filter = new CustomizedFilter(fragmentSrc);
 203 |             this.background.filters = [this.filter];
 204 | 
 205 |             this.animate();
 206 | 
 207 | 
 208 |         }
 209 | 
 210 |         private animate = (): void => {
 211 | 
 212 |             this.filter.uniforms.customUniform.value += 0.04;
 213 | 
 214 |             this.renderer.render(this.stage);
 215 |             requestAnimationFrame(this.animate);
 216 | 
 217 |         }
 218 | 
 219 |     }
 220 | 
 221 |     export class CustomizedFilter extends PIXI.AbstractFilter {
 222 | 
 223 |         constructor(fragmentSource: string | string[]) {
 224 |             super(null, fragmentSource, {
 225 |                 customUniform: {
 226 |                     type: '1f',
 227 |                     value: 0
 228 |                 }
 229 |             })
 230 |         }
 231 | 
 232 |     }
 233 | 
 234 | }
 235 | 
 236 | module basics {
 237 | 
 238 |     export class Graphics {
 239 | 
 240 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 241 | 
 242 |         private stage: PIXI.Container;
 243 | 
 244 |         private graphics: PIXI.Graphics;
 245 | 
 246 |         constructor() {
 247 | 
 248 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 249 |             document.body.appendChild(this.renderer.view);
 250 | 
 251 |             // create the root of the scene graph
 252 |             this.stage = new PIXI.Container();
 253 |             this.stage.interactive = true;
 254 | 
 255 |             this.graphics = new PIXI.Graphics();
 256 |             
 257 |             // draw a shape
 258 |             this.graphics.moveTo(50, 50);
 259 |             this.graphics.lineTo(250, 50);
 260 |             this.graphics.lineTo(100, 100);
 261 |             this.graphics.lineTo(50, 50);
 262 |             this.graphics.endFill();
 263 | 
 264 |             // set a fill and a line style again and draw a rectangle
 265 |             this.graphics.lineStyle(2, 0x0000FF, 1);
 266 |             this.graphics.beginFill(0xFF700B, 1);
 267 |             this.graphics.drawRect(50, 250, 120, 120);
 268 | 
 269 |             // draw a rounded rectangle
 270 |             this.graphics.lineStyle(2, 0xFF00FF, 1);
 271 |             this.graphics.beginFill(0xFF00BB, 0.25);
 272 |             this.graphics.drawRoundedRect(150, 450, 300, 100, 15);
 273 |             this.graphics.endFill();
 274 | 
 275 |             // draw a circle, set the lineStyle to zero so the circle doesn't have an outline
 276 |             this.graphics.lineStyle(0);
 277 |             this.graphics.beginFill(0xFFFF0B, 0.5);
 278 |             this.graphics.drawCircle(470, 90, 60);
 279 |             this.graphics.endFill();
 280 | 
 281 |             this.stage.addChild(this.graphics);
 282 | 
 283 |             // start animating
 284 |             this.animate();
 285 | 
 286 |         }
 287 | 
 288 |         private animate = (): void => {
 289 | 
 290 |             requestAnimationFrame(this.animate);
 291 | 
 292 |             this.renderer.render(this.stage);
 293 | 
 294 |         }
 295 | 
 296 |     }
 297 | 
 298 | }
 299 | 
 300 | module basics {
 301 | 
 302 |     export class RenderTexture {
 303 | 
 304 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 305 | 
 306 |         private stage: PIXI.Container;
 307 | 
 308 |         private container: PIXI.Container;
 309 | 
 310 |         private renderTexture: PIXI.RenderTexture;
 311 | 
 312 |         private sprite: PIXI.Sprite;
 313 | 
 314 |         constructor() {
 315 | 
 316 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 317 |             document.body.appendChild(this.renderer.view);
 318 | 
 319 |             // create the root of the scene graph
 320 |             this.stage = new PIXI.Container();
 321 | 
 322 |             this.container = new PIXI.Container();
 323 | 
 324 |             this.stage.addChild(this.container);
 325 | 
 326 |             for (var j = 0; j < 5; j++) {
 327 | 
 328 |                 for (var i = 0; i < 5; i++) {
 329 | 
 330 |                     var bunny: PIXI.Sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png');
 331 |                     bunny.x = 40 * i;
 332 |                     bunny.y = 40 * j;
 333 |                     bunny.rotation = Math.random() * (Math.PI * 2);
 334 |                     this.container.addChild(bunny);
 335 | 
 336 |                 };
 337 | 
 338 |             };
 339 | 
 340 |             this.renderTexture = new PIXI.RenderTexture(this.renderer, 300, 200, PIXI.SCALE_MODES.LINEAR, 0.1);
 341 | 
 342 |             this.sprite = new PIXI.Sprite(this.renderTexture);
 343 |             this.sprite.x = 450;
 344 |             this.sprite.y = 60;
 345 |             this.stage.addChild(this.sprite);
 346 | 
 347 |             this.container.x = 100;
 348 |             this.container.y = 60;
 349 | 
 350 |             // start animating
 351 |             this.animate();
 352 | 
 353 |         }
 354 | 
 355 |         private animate = (): void => {
 356 | 
 357 |             this.renderTexture.render(this.container);
 358 | 
 359 |             requestAnimationFrame(this.animate);
 360 | 
 361 |             this.renderer.render(this.stage);
 362 | 
 363 |         }
 364 | 
 365 |     }
 366 | 
 367 | }
 368 | 
 369 | module basics {
 370 | 
 371 |     export class SpriteSheet {
 372 | 
 373 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 374 | 
 375 |         private stage: PIXI.Container;
 376 | 
 377 |         private movie: PIXI.extras.MovieClip;
 378 | 
 379 |         constructor() {
 380 | 
 381 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 382 |             document.body.appendChild(this.renderer.view);
 383 | 
 384 |             // create the root of the scene graph
 385 |             this.stage = new PIXI.Container();
 386 | 
 387 |             PIXI.loader.add('../../_assets/basics/fighter.json').load((loader: PIXI.loaders.Loader, object: any): void => {
 388 | 
 389 |                 // create an array of textures from an image path
 390 |                 var frames: PIXI.Texture[] = [];
 391 | 
 392 |                 for (var i = 0; i < 30; i++) {
 393 | 
 394 |                     var val = i < 10 ? '0' + i : i;
 395 | 
 396 |                     // magically works since the spritesheet was loaded with the pixi loader
 397 |                     frames.push(PIXI.Texture.fromFrame('rollSequence00' + val + '.png'));
 398 |                 }
 399 | 
 400 | 
 401 |                 // create a MovieClip (brings back memories from the days of Flash, right ?)
 402 |                 this.movie = new PIXI.extras.MovieClip(frames);
 403 | 
 404 |                 /*
 405 |                  * A MovieClip inherits all the properties of a PIXI sprite
 406 |                  * so you can change its position, its anchor, mask it, etc
 407 |                  */
 408 |                 this.movie.position.set(300);
 409 |                 this.movie.anchor.set(0.5);
 410 |                 this.movie.animationSpeed = 0.5;
 411 |                 this.movie.play();
 412 | 
 413 |                 this.stage.addChild(this.movie);
 414 | 
 415 |                 this.animate();
 416 | 
 417 |             });
 418 | 
 419 |         }
 420 | 
 421 |         private animate = (): void => {
 422 | 
 423 |             this.movie.rotation += 0.01;
 424 | 
 425 |             //render the stage container
 426 |             this.renderer.render(this.stage);
 427 | 
 428 |             requestAnimationFrame(this.animate);
 429 | 
 430 |         }
 431 | 
 432 |     }
 433 | 
 434 | }
 435 | 
 436 | module basics {
 437 | 
 438 |     export class Text {
 439 | 
 440 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 441 | 
 442 |         private stage: PIXI.Container;
 443 | 
 444 |         private basicText: PIXI.Text;
 445 | 
 446 |         private richText: PIXI.Text;
 447 | 
 448 |         constructor() {
 449 | 
 450 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 451 |             document.body.appendChild(this.renderer.view);
 452 | 
 453 |             // create the root of the scene graph
 454 |             this.stage = new PIXI.Container();
 455 | 
 456 |             this.basicText = new PIXI.Text('Basic Text in Pixi');
 457 |             this.basicText.x = 30;
 458 |             this.basicText.y = 90;
 459 | 
 460 |             this.stage.addChild(this.basicText);
 461 | 
 462 |             var style: PIXI.TextStyle = {
 463 |                 font: '36px Arial bold italic',
 464 |                 fill: '#F7EDCA',
 465 |                 stroke: '#4a1850',
 466 |                 strokeThickness: 5,
 467 |                 dropShadow: true,
 468 |                 dropShadowColor: '#000000',
 469 |                 dropShadowAngle: Math.PI / 6,
 470 |                 dropShadowDistance: 6,
 471 |                 wordWrap: true,
 472 |                 wordWrapWidth: 440
 473 |             };
 474 | 
 475 |             this.richText = new PIXI.Text('Rich Text with a lot of options and across multiple lines', style);
 476 |             this.richText.x = 30;
 477 |             this.richText.y = 180;
 478 | 
 479 |             this.stage.addChild(this.richText);
 480 | 
 481 |             // start animating
 482 |             this.animate();
 483 | 
 484 |         }
 485 | 
 486 |         private animate = (): void => {
 487 | 
 488 |             requestAnimationFrame(this.animate);
 489 | 
 490 |             this.renderer.render(this.stage);
 491 | 
 492 |         }
 493 | 
 494 |     }
 495 | 
 496 | }
 497 | 
 498 | module basics {
 499 | 
 500 |     export class TexturedMesh {
 501 | 
 502 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 503 | 
 504 |         private stage: PIXI.Container;
 505 | 
 506 |         private strip: PIXI.mesh.Rope;
 507 | 
 508 |         private graphics: PIXI.Graphics;
 509 | 
 510 |         private count: number;
 511 | 
 512 |         private points: PIXI.Point[];
 513 | 
 514 |         private ropeLength: number;
 515 | 
 516 |         constructor() {
 517 | 
 518 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 519 |             document.body.appendChild(this.renderer.view);
 520 | 
 521 |             // create the root of the scene graph
 522 |             this.stage = new PIXI.Container();
 523 | 
 524 |             this.count = 0;
 525 | 
 526 |             this.ropeLength = 918 / 20;
 527 |             this.ropeLength = 45;
 528 | 
 529 |             this.points = [];
 530 | 
 531 |             for (var i = 0; i < 25; i++) {
 532 |                 this.points.push(new PIXI.Point(i * this.ropeLength, 0));
 533 |             };
 534 | 
 535 |             this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('../../_assets/snake.png'), this.points);
 536 |             this.strip.position.x = -40;
 537 |             this.strip.position.y = 300;
 538 |             this.stage.addChild(this.strip);
 539 | 
 540 |             this.graphics = new PIXI.Graphics();
 541 |             this.graphics.x = this.strip.x;
 542 |             this.graphics.y = this.strip.y;
 543 |             this.stage.addChild(this.graphics);
 544 | 
 545 |             //start animating
 546 |             this.animate();
 547 | 
 548 |         }
 549 | 
 550 |         private animate = (): void => {
 551 | 
 552 |             this.count += 0.1;
 553 | 
 554 |             //make the snake
 555 |             for (var i = 0; i < this.points.length; i++) {
 556 | 
 557 |                 this.points[i].y = Math.sin((i * 0.5) + this.count) * 30;
 558 | 
 559 |                 this.points[i].x = i * this.ropeLength + Math.cos((i * 0.3) + this.count) * 20;
 560 | 
 561 |             };
 562 | 
 563 |             //render the stage
 564 |             this.renderer.render(this.stage);
 565 | 
 566 |             this.renderPoints();
 567 | 
 568 |             requestAnimationFrame(this.animate);
 569 | 
 570 |         }
 571 | 
 572 |         private renderPoints(): void {
 573 | 
 574 |             this.graphics.clear();
 575 | 
 576 |             this.graphics.lineStyle(2, 0xffc2c2);
 577 |             this.graphics.moveTo(this.points[0].x, this.points[0].y);
 578 | 
 579 |             for (var i = 1; i < this.points.length; i++) {
 580 |                 this.graphics.lineTo(this.points[i].x, this.points[i].y);
 581 |             };
 582 | 
 583 |             for (var i = 1; i < this.points.length; i++) {
 584 |                 this.graphics.beginFill(0xff0022);
 585 |                 this.graphics.drawCircle(this.points[i].x, this.points[i].y, 10);
 586 |                 this.graphics.endFill();
 587 |             };
 588 | 
 589 |         }
 590 | 
 591 |     }
 592 | 
 593 | }
 594 | 
 595 | module basics {
 596 | 
 597 |     export class TilingSprite {
 598 | 
 599 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 600 | 
 601 |         private stage: PIXI.Container;
 602 | 
 603 |         private texture: PIXI.Texture;
 604 | 
 605 |         private tilingSprite: PIXI.extras.TilingSprite;
 606 | 
 607 |         private count: number;
 608 | 
 609 |         constructor() {
 610 | 
 611 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 612 |             document.body.appendChild(this.renderer.view);
 613 | 
 614 |             // create the root of the scene graph
 615 |             this.stage = new PIXI.Container();
 616 | 
 617 |             //create a texture from an image path
 618 |             this.texture = PIXI.Texture.fromImage('../../_assets/p2.jpeg');
 619 | 
 620 |             /* create a tiling sprite ...
 621 |              * requires a texture, a width and a height
 622 |              * in WebGL the image size should preferably be a power of two
 623 |              */
 624 |             this.tilingSprite = new PIXI.extras.TilingSprite(this.texture, this.renderer.width, this.renderer.height);
 625 |             this.stage.addChild(this.tilingSprite);
 626 | 
 627 |             this.count = 0;
 628 | 
 629 |             this.animate();
 630 | 
 631 |         }
 632 | 
 633 |         private animate = (): void => {
 634 | 
 635 |             this.count += 0.005;
 636 | 
 637 |             this.tilingSprite.tileScale.x = 2 + Math.sin(this.count);
 638 |             this.tilingSprite.tileScale.y = 2 + Math.cos(this.count);
 639 | 
 640 |             this.tilingSprite.tilePosition.x += 1;
 641 |             this.tilingSprite.tilePosition.y += 1;
 642 | 
 643 |             // render the root container
 644 |             this.renderer.render(this.stage);
 645 | 
 646 |             requestAnimationFrame(this.animate);
 647 | 
 648 |         }
 649 | 
 650 |     }
 651 | 
 652 | }
 653 | 
 654 | module basics {
 655 | 
 656 |     export class Video {
 657 | 
 658 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 659 | 
 660 |         private stage: PIXI.Container;
 661 | 
 662 |         private texture: PIXI.Texture;
 663 | 
 664 |         private videoSprite: PIXI.Sprite;
 665 | 
 666 |         constructor() {
 667 | 
 668 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 669 |             document.body.appendChild(this.renderer.view);
 670 | 
 671 |             // create the root of the scene graph
 672 |             this.stage = new PIXI.Container();
 673 | 
 674 |             //create a video texture from a path
 675 |             this.texture = PIXI.Texture.fromVideo('../../_assets/testVideo.mp4');
 676 | 
 677 |             //create a new sprite using the video texture (yes it's that easy)
 678 |             this.videoSprite = new PIXI.Sprite(this.texture);
 679 |             this.videoSprite.width = this.renderer.width;
 680 |             this.videoSprite.height = this.renderer.height;
 681 |             this.stage.addChild(this.videoSprite);
 682 | 
 683 |             this.stage.addChild(this.videoSprite);
 684 | 
 685 |             this.animate();
 686 | 
 687 |         }
 688 | 
 689 |         private animate = (): void => {
 690 | 
 691 |             //render the stage
 692 |             this.renderer.render(this.stage);
 693 | 
 694 |             requestAnimationFrame(this.animate);
 695 | 
 696 |         }
 697 | 
 698 |     }
 699 | 
 700 | }
 701 | 
 702 | module demos {
 703 | 
 704 |     export class AlphaMask {
 705 | 
 706 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 707 | 
 708 |         private stage: PIXI.Container;
 709 | 
 710 |         private background: PIXI.Container;
 711 | 
 712 |         private cells: PIXI.Sprite;
 713 | 
 714 |         private mask: PIXI.Sprite;
 715 | 
 716 |         private target: PIXI.Point;
 717 | 
 718 |         constructor() {
 719 | 
 720 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 721 |             document.body.appendChild(this.renderer.view);
 722 | 
 723 |             // create the root of the scene graph
 724 |             this.stage = new PIXI.Container();
 725 |             this.stage.interactive = true;
 726 | 
 727 |             this.background = PIXI.Sprite.fromImage('../../_assets/bkg.jpg');
 728 |             this.stage.addChild(this.background);
 729 | 
 730 |             this.cells = PIXI.Sprite.fromImage('../../_assets/cells.png');
 731 |             this.cells.scale.set(1.5, 1.5);
 732 | 
 733 |             this.mask = PIXI.Sprite.fromImage('../../_assets/flowerTop.png');
 734 |             this.mask.anchor.set(0.5);
 735 |             this.mask.position.x = 310;
 736 |             this.mask.position.y = 190;
 737 | 
 738 |             this.cells.mask = this.mask;
 739 | 
 740 |             this.stage.addChild(this.mask);
 741 | 
 742 |             this.stage.addChild(this.cells);
 743 | 
 744 |             this.target = new PIXI.Point();
 745 | 
 746 |             this.reset();
 747 | 
 748 |             this.animate();
 749 | 
 750 |         }
 751 | 
 752 |         private reset(): void {
 753 | 
 754 |             this.target.x = Math.floor(Math.random() * 550);
 755 |             this.target.y = Math.floor(Math.random() * 300);
 756 | 
 757 |         }
 758 | 
 759 |         private animate = (): void => {
 760 | 
 761 |             this.mask.position.x += (this.target.x - this.mask.x) * 0.1;
 762 |             this.mask.position.y += (this.target.y - this.mask.y) * 0.1;
 763 | 
 764 |             if (Math.abs(this.mask.x - this.target.x) < 1) {
 765 |                 this.reset();
 766 |             }
 767 | 
 768 |             this.renderer.render(this.stage);
 769 | 
 770 |             requestAnimationFrame(this.animate);
 771 | 
 772 |         }
 773 | 
 774 |     }
 775 | 
 776 | }
 777 | 
 778 | module demos {
 779 | 
 780 |     export class Batch {
 781 | 
 782 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 783 | 
 784 |         private stage: PIXI.Container;
 785 | 
 786 |         private sprites: PIXI.ParticleContainer;
 787 | 
 788 |         private maggots: BatchDude[];
 789 | 
 790 |         private tick: number;
 791 | 
 792 |         private dudeBounds: PIXI.Rectangle;
 793 | 
 794 |         constructor() {
 795 | 
 796 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 797 |             document.body.appendChild(this.renderer.view);
 798 | 
 799 |             // create the root of the scene graph
 800 |             this.stage = new PIXI.Container();
 801 | 
 802 |             this.sprites = new PIXI.ParticleContainer(10000, {
 803 | 
 804 |                 scale: true,
 805 |                 position: true,
 806 |                 rotation: true,
 807 |                 uvs: true,
 808 |                 alpha: true
 809 | 
 810 |             });
 811 |             this.stage.addChild(this.sprites);
 812 | 
 813 |             // create an array to store all the sprites
 814 |             this.maggots = [];
 815 | 
 816 |             var totalSprites = this.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100;
 817 | 
 818 |             for (var i = 0; i < totalSprites; i++) {
 819 | 
 820 |                 // create a new Sprite
 821 |                 var dude = new BatchDude(PIXI.Texture.fromImage('../../_assets/tinyMaggot.png'));
 822 | 
 823 |                 dude.tint = Math.random() * 0xE8D4CD;
 824 | 
 825 |                 // set the anchor point so the texture is centerd on the sprite
 826 |                 dude.anchor.set(0.5);
 827 | 
 828 |                 // different maggots, different sizes
 829 |                 dude.scale.set(0.8 + Math.random() * 0.3);
 830 | 
 831 |                 // scatter them all
 832 |                 dude.x = Math.random() * this.renderer.width;
 833 |                 dude.y = Math.random() * this.renderer.height;
 834 | 
 835 |                 dude.tint = Math.random() * 0x808080;
 836 | 
 837 |                 // create a random direction in radians
 838 |                 dude.direction = Math.random() * Math.PI * 2;
 839 | 
 840 |                 // this number will be used to modify the direction of the sprite over time
 841 |                 dude.turningSpeed = Math.random() - 0.8;
 842 | 
 843 |                 // create a random speed between 0 - 2, and these maggots are slooww
 844 |                 dude.speed = (2 + Math.random() * 2) * 0.2;
 845 | 
 846 |                 dude.offset = Math.random() * 100;
 847 | 
 848 |                 // finally we push the dude into the maggots array so it it can be easily accessed later
 849 |                 this.maggots.push(dude);
 850 | 
 851 |                 this.sprites.addChild(dude);
 852 | 
 853 |             }
 854 | 
 855 |             // create a bounding box box for the little maggots
 856 |             var dudeBoundsPadding = 100;
 857 |             this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
 858 |                 -dudeBoundsPadding,
 859 |                 this.renderer.width + dudeBoundsPadding * 2,
 860 |                 this.renderer.height + dudeBoundsPadding * 2);
 861 | 
 862 |             this.tick = 0;
 863 | 
 864 |             // start animating
 865 |             this.animate();
 866 | 
 867 |         }
 868 | 
 869 |         private animate = (): void => {
 870 | 
 871 |             // iterate through the sprites and update their position
 872 |             for (var i = 0; i < this.maggots.length; i++) {
 873 | 
 874 |                 var dude = this.maggots[i];
 875 |                 dude.scale.y = 0.95 + Math.sin(this.tick + dude.offset) * 0.05;
 876 |                 dude.direction += dude.turningSpeed * 0.01;
 877 |                 dude.position.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
 878 |                 dude.position.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y);
 879 |                 dude.rotation = -dude.direction + Math.PI;
 880 | 
 881 |                 // wrap the maggots
 882 |                 if (dude.position.x < this.dudeBounds.x) {
 883 |                     dude.position.x += this.dudeBounds.width;
 884 |                 }
 885 |                 else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) {
 886 |                     dude.position.x -= this.dudeBounds.width;
 887 |                 }
 888 | 
 889 |                 if (dude.position.y < this.dudeBounds.y) {
 890 |                     dude.position.y += this.dudeBounds.height;
 891 |                 }
 892 |                 else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) {
 893 |                     dude.position.y -= this.dudeBounds.height;
 894 |                 }
 895 |             }
 896 | 
 897 |             // increment the ticker
 898 |             this.tick += 0.1;
 899 | 
 900 |             // time to render the stage !
 901 |             this.renderer.render(this.stage);
 902 | 
 903 |             // request another animation frame...
 904 |             requestAnimationFrame(this.animate);
 905 | 
 906 |         }
 907 | 
 908 |     }
 909 | 
 910 |     export class BatchDude extends PIXI.Sprite {
 911 | 
 912 |         direction: number;
 913 |         speed: number;
 914 |         turningSpeed: number;
 915 |         offset: number;
 916 | 
 917 |         constructor(texture: PIXI.Texture) {
 918 | 
 919 |             super(texture);
 920 | 
 921 |         }
 922 | 
 923 |     }
 924 | 
 925 | }
 926 | 
 927 | module demos {
 928 | 
 929 |     export class BlendModes {
 930 | 
 931 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
 932 | 
 933 |         private stage: PIXI.Container;
 934 | 
 935 |         private background: PIXI.Sprite;
 936 | 
 937 |         private dudeArray: BlendModesDude[];
 938 | 
 939 |         private totalDudes: number;
 940 | 
 941 |         private dudeBounds: PIXI.Rectangle;
 942 | 
 943 |         private tick: number;
 944 | 
 945 |         constructor() {
 946 | 
 947 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
 948 |             document.body.appendChild(this.renderer.view);
 949 | 
 950 |             // create the root of the scene graph
 951 |             this.stage = new PIXI.Container();
 952 | 
 953 |             // create a new background sprite
 954 |             this.background = PIXI.Sprite.fromImage('../../_assets/BGrotate.jpg');
 955 |             this.stage.addChild(this.background);
 956 | 
 957 |             // create an array to store a reference to the dudes
 958 |             this.dudeArray = [];
 959 | 
 960 |             this.totalDudes = 20;
 961 | 
 962 |             for (var i = 0; i < this.totalDudes; i++) {
 963 | 
 964 |                 // create a new Sprite that uses the image name that we just generated as its source
 965 |                 var dude = new BlendModesDude(PIXI.Texture.fromImage('../../_assets/flowerTop.png'));
 966 | 
 967 |                 dude.anchor.set(0.5);
 968 | 
 969 |                 // set a random scale for the dude
 970 |                 dude.scale.set(0.8 + Math.random() * 0.3);
 971 | 
 972 |                 // finally let's set the dude to be at a random position...
 973 |                 dude.position.x = Math.floor(Math.random() * this.renderer.width);
 974 |                 dude.position.y = Math.floor(Math.random() * this.renderer.height);
 975 | 
 976 |                 // The important bit of this example, this is how you change the default blend mode of the sprite
 977 |                 dude.blendMode = PIXI.BLEND_MODES.ADD;
 978 | 
 979 |                 // create some extra properties that will control movement
 980 |                 dude.direction = Math.random() * Math.PI * 2;
 981 | 
 982 |                 // this number will be used to modify the direction of the dude over time
 983 |                 dude.turningSpeed = Math.random() - 0.8;
 984 | 
 985 |                 // create a random speed for the dude between 0 - 2
 986 |                 dude.speed = 2 + Math.random() * 2;
 987 | 
 988 |                 // finally we push the dude into the dudeArray so it it can be easily accessed later
 989 |                 this.dudeArray.push(dude);
 990 | 
 991 |                 this.stage.addChild(dude);
 992 | 
 993 |             }
 994 | 
 995 |             // create a bounding box box for the little maggots
 996 |             var dudeBoundsPadding = 100;
 997 |             this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
 998 |                 -dudeBoundsPadding,
 999 |                 this.renderer.width + dudeBoundsPadding * 2,
1000 |                 this.renderer.height + dudeBoundsPadding * 2);
1001 | 
1002 |             this.tick = 0;
1003 | 
1004 |             // start animating
1005 |             this.animate();
1006 | 
1007 |         }
1008 | 
1009 |         private animate = (): void => {
1010 | 
1011 |             // iterate through the dudes and update the positions
1012 |             for (var i = 0; i < this.dudeArray.length; i++) {
1013 | 
1014 |                 var dude = this.dudeArray[i];
1015 |                 dude.direction += dude.turningSpeed * 0.01;
1016 |                 dude.position.x += Math.sin(dude.direction) * dude.speed;
1017 |                 dude.position.y += Math.cos(dude.direction) * dude.speed;
1018 |                 dude.rotation = -dude.direction - Math.PI / 2;
1019 | 
1020 |                 // wrap the dudes by testing their bounds...
1021 |                 if (dude.position.x < this.dudeBounds.x) {
1022 |                     dude.position.x += this.dudeBounds.width;
1023 |                 }
1024 |                 else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) {
1025 |                     dude.position.x -= this.dudeBounds.width;
1026 |                 }
1027 | 
1028 |                 if (dude.position.y < this.dudeBounds.y) {
1029 |                     dude.position.y += this.dudeBounds.height;
1030 |                 }
1031 |                 else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) {
1032 |                     dude.position.y -= this.dudeBounds.height;
1033 |                 }
1034 |             }
1035 | 
1036 |             // increment the ticker
1037 |             this.tick += 0.1;
1038 | 
1039 |             // time to render the stage !
1040 |             this.renderer.render(this.stage);
1041 | 
1042 |             // request another animation frame...
1043 |             requestAnimationFrame(this.animate);
1044 | 
1045 |         }
1046 | 
1047 |     }
1048 | 
1049 |     export class BlendModesDude extends PIXI.Sprite {
1050 | 
1051 |         direction: number;
1052 |         speed: number;
1053 |         turningSpeed: number;
1054 |         offset: number;
1055 | 
1056 |         constructor(texture: PIXI.Texture) {
1057 | 
1058 |             super(texture);
1059 | 
1060 |         }
1061 | 
1062 |     }
1063 | 
1064 | }
1065 | 
1066 | module demos {
1067 | 
1068 |     export class CacheAsBitmap {
1069 | 
1070 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
1071 | 
1072 |         private stage: PIXI.Container;
1073 | 
1074 |         private aliens: PIXI.Sprite[];
1075 | 
1076 |         private alienContainer: PIXI.Container;
1077 | 
1078 |         private count: number;
1079 | 
1080 |         constructor() {
1081 | 
1082 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
1083 |             document.body.appendChild(this.renderer.view);
1084 | 
1085 |             // create the root of the scene graph
1086 |             this.stage = new PIXI.Container();
1087 | 
1088 |             // load resources
1089 |             PIXI.loader
1090 |                 .add('spritesheet', '../../_assets/monsters.json')
1091 |                 .load(this.onAssetsLoaded);
1092 | 
1093 |             // holder to store aliens
1094 |             this.aliens = [];
1095 | 
1096 |             this.count = 0;
1097 | 
1098 |             // create an empty container
1099 |             this.alienContainer = new PIXI.Container();
1100 |             this.alienContainer.position.x = 400;
1101 |             this.alienContainer.position.y = 300;
1102 | 
1103 |             // make the stage interactive
1104 |             this.stage.interactive = true;
1105 | 
1106 |             this.stage.addChild(this.alienContainer);
1107 | 
1108 |             this.stage.on('click', this.onClick);
1109 |             this.stage.on('tap', this.onClick);
1110 | 
1111 |         }
1112 | 
1113 |         private onClick = (event: PIXI.interaction.InteractionEvent): void => {
1114 | 
1115 |             this.alienContainer.cacheAsBitmap = !this.alienContainer.cacheAsBitmap;
1116 | 
1117 |             //feel free to play with what's below
1118 |             //var sprite = new PIXI.Sprite(this.alienContainer.generateTexture());
1119 |             //this.stage.addChild(sprite);
1120 |             //sprite.position.x = Math.random() * 800;
1121 |             //sprite.position.y = Math.random() * 600;
1122 | 
1123 |         }
1124 | 
1125 |         private onAssetsLoaded = (): void => {
1126 | 
1127 |             // add a bunch of aliens with textures from image paths
1128 | 
1129 |             var alienFrames = ['eggHead.png', 'flowerTop.png', 'helmlok.png', 'skully.png'];
1130 | 
1131 |             for (var i = 0; i < 100; i++) {
1132 | 
1133 |                 var frameName = alienFrames[i % 4];
1134 | 
1135 |                 // create an alien using the frame name..
1136 |                 var alien = PIXI.Sprite.fromFrame(frameName);
1137 |                 alien.tint = Math.random() * 0xFFFFFF;
1138 | 
1139 |                 /*
1140 |                  * fun fact for the day :)
1141 |                  * another way of doing the above would be
1142 |                  * var texture = PIXI.Texture.fromFrame(frameName);
1143 |                  * var alien = new PIXI.Sprite(texture);
1144 |                  */
1145 |                 alien.position.x = Math.random() * 800 - 400;
1146 |                 alien.position.y = Math.random() * 600 - 300;
1147 |                 alien.anchor.x = 0.5;
1148 |                 alien.anchor.y = 0.5;
1149 |                 this.aliens.push(alien);
1150 |                 this.alienContainer.addChild(alien);
1151 | 
1152 |             }
1153 | 
1154 |             // start animating
1155 |             this.animate();
1156 | 
1157 |         }
1158 | 
1159 |         private animate = (): void => {
1160 | 
1161 |             // let's rotate the aliens a little bit
1162 |             for (var i = 0; i < 100; i++) {
1163 |                 var alien = this.aliens[i];
1164 |                 alien.rotation += 0.1;
1165 |             }
1166 | 
1167 |             this.count += 0.01;
1168 | 
1169 |             this.alienContainer.scale.x = Math.sin(this.count);
1170 |             this.alienContainer.scale.y = Math.sin(this.count);
1171 | 
1172 |             this.alienContainer.rotation += 0.01;
1173 | 
1174 |             // render the stage
1175 |             this.renderer.render(this.stage);
1176 | 
1177 |             requestAnimationFrame(this.animate);
1178 | 
1179 |         }
1180 | 
1181 |     }
1182 | 
1183 | }
1184 | 
1185 | module demos {
1186 | 
1187 |     export class DraggableBunny extends PIXI.Sprite {
1188 | 
1189 |         //todo I dont know what event.data is at this time
1190 |         private data: any;
1191 | 
1192 |         private dragging: boolean;
1193 | 
1194 |         constructor(texture?: PIXI.Texture) {
1195 | 
1196 |             super(texture);
1197 | 
1198 |             // enable the bunny to be interactive... this will allow it to respond to mouse and touch events
1199 |             this.interactive = true;
1200 | 
1201 |             // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse
1202 |             this.buttonMode = true;
1203 | 
1204 |             // center the bunny's anchor point
1205 |             this.anchor.set(0.5);
1206 | 
1207 |             // make it a bit bigger, so it's easier to grab
1208 |             this.scale.set(3);
1209 | 
1210 |             // setup events
1211 |             this
1212 |             // events for drag start
1213 |                 .on('mousedown', this.onDragStart)
1214 |                 .on('touchstart', this.onDragStart)
1215 |             // events for drag end
1216 |                 .on('mouseup', this.onDragEnd)
1217 |                 .on('mouseupoutside', this.onDragEnd)
1218 |                 .on('touchend', this.onDragEnd)
1219 |                 .on('touchendoutside', this.onDragEnd)
1220 |             // events for drag move
1221 |                 .on('mousemove', this.onDragMove)
1222 |                 .on('touchmove', this.onDragMove);
1223 | 
1224 |         }
1225 | 
1226 |         private onDragStart = (event: PIXI.interaction.InteractionEvent): void => {
1227 | 
1228 |             // store a reference to the data
1229 |             // the reason for this is because of multitouch
1230 |             // we want to track the movement of this particular touch
1231 |             this.data = event.data;
1232 |             this.alpha = 0.5;
1233 |             this.dragging = true;
1234 | 
1235 |         }
1236 | 
1237 |         private onDragEnd = (event: PIXI.interaction.InteractionEvent): void => {
1238 | 
1239 |             //set interactiondata to null
1240 |             this.data = null;
1241 |             this.alpha = 1;
1242 |             this.dragging = false;
1243 | 
1244 |         }
1245 | 
1246 |         private onDragMove = (event: PIXI.interaction.InteractionEvent): void => {
1247 | 
1248 |             if (this.dragging) {
1249 |                 var newPosition = this.data.getLocalPosition(this.parent);
1250 |                 this.position.x = newPosition.x;
1251 |                 this.position.y = newPosition.y;
1252 |             }
1253 | 
1254 |         }
1255 | 
1256 |     }
1257 | 
1258 |     export class Dragging {
1259 | 
1260 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
1261 | 
1262 |         private stage: PIXI.Container;
1263 | 
1264 |         private texture: PIXI.Texture;
1265 | 
1266 |         private data: PIXI.interaction.InteractionData;
1267 | 
1268 |         constructor() {
1269 | 
1270 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
1271 |             document.body.appendChild(this.renderer.view);
1272 | 
1273 |             // create the root of the scene graph
1274 |             this.stage = new PIXI.Container();
1275 | 
1276 |             //create a texture from an image
1277 |             this.texture = PIXI.Texture.fromImage('../../_assets/bunny.png');
1278 | 
1279 |             for (var i = 0; i < 10; i++) {
1280 |                 this.createBunny(Math.floor(Math.random() * 800), Math.floor(Math.random() * 600));
1281 |             }
1282 | 
1283 |             // start animating
1284 |             this.animate();
1285 | 
1286 |         }
1287 | 
1288 |         private createBunny(x: number, y: number): void {
1289 | 
1290 |             // create our little bunny friend..
1291 |             var bunny = new DraggableBunny(this.texture);
1292 | 
1293 |             // move the sprite to its designated position
1294 |             bunny.position.x = x;
1295 |             bunny.position.y = y;
1296 | 
1297 |             // add it to the stage
1298 |             this.stage.addChild(bunny);
1299 | 
1300 |         }
1301 | 
1302 |         private animate = (): void => {
1303 | 
1304 |             requestAnimationFrame(this.animate);
1305 | 
1306 |             this.renderer.render(this.stage);
1307 | 
1308 |         }
1309 | 
1310 |     }
1311 | 
1312 | }
1313 | 
1314 | module demos {
1315 | 
1316 |     export class GraphicsDemo {
1317 | 
1318 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
1319 | 
1320 |         private stage: PIXI.Container;
1321 | 
1322 |         private thing: PIXI.Graphics;
1323 | 
1324 |         private graphics: PIXI.Graphics;
1325 | 
1326 |         private count: number;
1327 | 
1328 |         constructor() {
1329 | 
1330 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
1331 |             document.body.appendChild(this.renderer.view);
1332 | 
1333 |             // create the root of the scene graph
1334 |             this.stage = new PIXI.Container();
1335 |             this.stage.interactive = true;
1336 | 
1337 |             this.graphics = new PIXI.Graphics();
1338 | 
1339 |             // set a fill and line style
1340 |             this.graphics.beginFill(0xFF3300);
1341 |             this.graphics.lineStyle(10, 0xffd900, 1);
1342 | 
1343 |             // draw a shape
1344 |             this.graphics.moveTo(50, 50);
1345 |             this.graphics.lineTo(250, 50);
1346 |             this.graphics.lineTo(100, 100);
1347 |             this.graphics.lineTo(250, 220);
1348 |             this.graphics.lineTo(50, 220);
1349 |             this.graphics.lineTo(50, 50);
1350 |             this.graphics.endFill();
1351 | 
1352 |             // set a fill and line style again
1353 |             this.graphics.lineStyle(10, 0xFF0000, 0.8);
1354 |             this.graphics.beginFill(0xFF700B, 1);
1355 | 
1356 |             // draw a second shape
1357 |             this.graphics.moveTo(210, 300);
1358 |             this.graphics.lineTo(450, 320);
1359 |             this.graphics.lineTo(570, 350);
1360 |             this.graphics.quadraticCurveTo(600, 0, 480, 100);
1361 |             this.graphics.lineTo(330, 120);
1362 |             this.graphics.lineTo(410, 200);
1363 |             this.graphics.lineTo(210, 300);
1364 |             this.graphics.endFill();
1365 | 
1366 |             // draw a rectangle
1367 |             this.graphics.lineStyle(2, 0x0000FF, 1);
1368 |             this.graphics.drawRect(50, 250, 100, 100);
1369 | 
1370 |             // draw a circle
1371 |             this.graphics.lineStyle(0);
1372 |             this.graphics.beginFill(0xFFFF0B, 0.5);
1373 |             this.graphics.drawCircle(470, 200, 100);
1374 |             this.graphics.endFill();
1375 | 
1376 |             this.graphics.lineStyle(20, 0x33FF00);
1377 |             this.graphics.moveTo(30, 30);
1378 |             this.graphics.lineTo(600, 300);
1379 | 
1380 |             this.stage.addChild(this.graphics);
1381 | 
1382 |             // let's create a moving shape
1383 |             this.thing = new PIXI.Graphics();
1384 |             this.stage.addChild(this.thing);
1385 |             this.thing.position.x = 620 / 2;
1386 |             this.thing.position.y = 380 / 2;
1387 | 
1388 |             this.count = 0;
1389 | 
1390 |             // Just click on the stage to draw random lines
1391 |             this.stage.on('click', this.onClick);
1392 |             this.stage.on('tap', this.onClick);
1393 | 
1394 |             // start animating
1395 |             this.animate();
1396 | 
1397 |         }
1398 | 
1399 |         private onClick = (event: PIXI.interaction.InteractionEvent): void => {
1400 | 
1401 |             this.graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
1402 |             this.graphics.moveTo(Math.random() * 620, Math.random() * 380);
1403 |             this.graphics.bezierCurveTo(Math.random() * 620, Math.random() * 380,
1404 |                 Math.random() * 620, Math.random() * 380,
1405 |                 Math.random() * 620, Math.random() * 380);
1406 |         }
1407 | 
1408 |         private animate = (): void => {
1409 | 
1410 |             this.thing.clear();
1411 | 
1412 |             this.count += 0.1;
1413 | 
1414 |             this.thing.clear();
1415 |             this.thing.lineStyle(10, 0xff0000, 1);
1416 |             this.thing.beginFill(0xffFF00, 0.5);
1417 | 
1418 |             this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
1419 |             this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20);
1420 |             this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20);
1421 |             this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
1422 |             this.thing.lineTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
1423 | 
1424 |             this.thing.rotation = this.count * 0.1;
1425 | 
1426 |             this.renderer.render(this.stage);
1427 | 
1428 |             requestAnimationFrame(this.animate);
1429 |         }
1430 | 
1431 |     }
1432 | 
1433 | }
1434 | 
1435 | module demos {
1436 | 
1437 |     export class Interactivity {
1438 | 
1439 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
1440 | 
1441 |         private stage: PIXI.Container;
1442 | 
1443 |         private background: PIXI.Sprite;
1444 | 
1445 |         private buttons: InteractivityButton[];
1446 | 
1447 |         constructor() {
1448 | 
1449 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
1450 |             document.body.appendChild(this.renderer.view);
1451 | 
1452 |             // create the root of the scene graph
1453 |             this.stage = new PIXI.Container();
1454 | 
1455 |             // create a background...
1456 |             this.background = PIXI.Sprite.fromImage('../../_assets/button_test_BG.jpg');
1457 |             this.background.width = this.renderer.width;
1458 |             this.background.height = this.renderer.height;
1459 | 
1460 |             // add background to stage...
1461 |             this.stage.addChild(this.background);
1462 | 
1463 |             this.buttons = [];
1464 | 
1465 |             var buttonPositions = [
1466 |                 175, 75,
1467 |                 655, 75,
1468 |                 410, 325,
1469 |                 150, 465,
1470 |                 685, 445
1471 |             ];
1472 | 
1473 |             function noop(): void {
1474 |                 console.log('click');
1475 |             }
1476 | 
1477 |             // create some textures from an image path
1478 |             var textureButton = PIXI.Texture.fromImage('../../_assets/button.png');
1479 |             var textureButtonDown = PIXI.Texture.fromImage('../../_assets/buttonDown.png');
1480 |             var textureButtonOver = PIXI.Texture.fromImage('../../_assets/buttonOver.png');
1481 | 
1482 |             for (var i = 0; i < 5; i++) {
1483 | 
1484 |                 var button = new InteractivityButton(textureButton, textureButtonDown, textureButtonOver);
1485 | 
1486 |                 button.position.x = buttonPositions[i * 2];
1487 |                 button.position.y = buttonPositions[i * 2 + 1];
1488 | 
1489 |                 button.tap = noop;
1490 |                 button.click = noop;
1491 | 
1492 |                 // add it to the stage
1493 |                 this.stage.addChild(button);
1494 | 
1495 |                 // add button to array
1496 |                 this.buttons.push(button);
1497 | 
1498 |             }
1499 | 
1500 |             // set some silly values...
1501 |             this.buttons[0].scale.set(1.2);
1502 | 
1503 |             this.buttons[2].rotation = Math.PI / 10;
1504 | 
1505 |             this.buttons[3].scale.set(0.8);
1506 | 
1507 |             this.buttons[4].scale.set(0.8, 1.2);
1508 |             this.buttons[4].rotation = Math.PI;
1509 | 
1510 |             // start animating
1511 |             this.animate();
1512 | 
1513 |         }
1514 | 
1515 |         private animate = (): void => {
1516 | 
1517 |             requestAnimationFrame(this.animate);
1518 | 
1519 |             this.renderer.render(this.stage);
1520 | 
1521 |         }
1522 | 
1523 |     }
1524 | 
1525 |     export class InteractivityButton extends PIXI.Sprite {
1526 | 
1527 |         private textureButton: PIXI.Texture;
1528 |         private textureButtonDown: PIXI.Texture;
1529 |         private textureButtonOver: PIXI.Texture;
1530 | 
1531 |         tap: Function;
1532 |         click: Function;
1533 | 
1534 |         isdown: boolean;
1535 |         isOver: boolean;
1536 | 
1537 |         constructor(textureButton: PIXI.Texture, textureButtonDown: PIXI.Texture, textureButtonOver: PIXI.Texture) {
1538 | 
1539 |             super(textureButton);
1540 | 
1541 |             // create some textures from an image path
1542 |             this.textureButton = textureButton;
1543 |             this.textureButtonDown = textureButtonDown;
1544 |             this.textureButtonOver = textureButtonOver;
1545 | 
1546 |             this.buttonMode = true;
1547 |             this.anchor.set(0.5);
1548 | 
1549 |             // make the button interactive...
1550 |             this.interactive = true;
1551 | 
1552 |             this
1553 |             // set the mousedown and touchstart callback...
1554 |                 .on('mousedown', this.onButtonDown)
1555 |                 .on('touchstart', this.onButtonDown)
1556 | 
1557 |             // set the mouseup and touchend callback...
1558 |                 .on('mouseup', this.onButtonUp)
1559 |                 .on('touchend', this.onButtonUp)
1560 |                 .on('mouseupoutside', this.onButtonUp)
1561 |                 .on('touchendoutside', this.onButtonUp)
1562 | 
1563 |             // set the mouseover callback...
1564 |                 .on('mouseover', this.onButtonOver)
1565 | 
1566 |             // set the mouseout callback...
1567 |                 .on('mouseout', this.onButtonOut)
1568 | 
1569 |             // you can also listen to click and tap events :
1570 |             //.on('click', this.noop)
1571 | 
1572 |         }
1573 | 
1574 |         private onButtonDown = (event: PIXI.interaction.InteractionEvent): void => {
1575 | 
1576 |             this.isdown = true;
1577 |             this.texture = this.textureButtonDown;
1578 |             this.alpha = 1;
1579 | 
1580 |         }
1581 | 
1582 |         private onButtonUp = (event: PIXI.interaction.InteractionEvent): void => {
1583 | 
1584 |             this.isdown = false;
1585 | 
1586 |             if (this.isOver) {
1587 |                 this.texture = this.textureButtonOver;
1588 |             }
1589 |             else {
1590 |                 this.texture = this.textureButton;
1591 |             }
1592 |         }
1593 | 
1594 |         private onButtonOver = (event: PIXI.interaction.InteractionEvent): void => {
1595 | 
1596 |             this.isOver = true;
1597 | 
1598 |             if (this.isdown) {
1599 |                 return;
1600 |             }
1601 | 
1602 |             this.texture = this.textureButtonOver;
1603 | 
1604 |         }
1605 | 
1606 |         private onButtonOut = (event: PIXI.interaction.InteractionEvent): void => {
1607 | 
1608 |             this.isOver = false;
1609 | 
1610 |             if (this.isdown) {
1611 |                 return;
1612 |             }
1613 | 
1614 |             this.texture = this.textureButton;
1615 |         }
1616 | 
1617 |     }
1618 | 
1619 | }
1620 | 
1621 | module demos {
1622 | 
1623 |     export class Masking {
1624 | 
1625 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
1626 | 
1627 |         private stage: PIXI.Container;
1628 | 
1629 |         private bg: PIXI.Sprite;
1630 | 
1631 |         private container: PIXI.Container;
1632 | 
1633 |         private bgFront: PIXI.Sprite;
1634 | 
1635 |         private light1: PIXI.Sprite;
1636 | 
1637 |         private light2: PIXI.Sprite;
1638 | 
1639 |         private panda: PIXI.Sprite;
1640 | 
1641 |         private thing: PIXI.Graphics;
1642 | 
1643 |         private count: number;
1644 | 
1645 |         private help: PIXI.Text;
1646 | 
1647 |         constructor() {
1648 | 
1649 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb, antialias: true });
1650 |             document.body.appendChild(this.renderer.view);
1651 | 
1652 |             // create the root of the scene graph
1653 |             this.stage = new PIXI.Container();
1654 |             this.stage.interactive = true;
1655 | 
1656 |             this.bg = PIXI.Sprite.fromImage('../../_assets/BGrotate.jpg');
1657 |             this.bg.anchor.x = 0.5;
1658 |             this.bg.anchor.y = 0.5;
1659 | 
1660 |             this.bg.position.x = this.renderer.width / 2;
1661 |             this.bg.position.y = this.renderer.height / 2;
1662 | 
1663 |             this.stage.addChild(this.bg);
1664 | 
1665 |             this.container = new PIXI.Container();
1666 |             this.container.position.x = this.renderer.width / 2;
1667 |             this.container.position.y = this.renderer.height / 2;
1668 | 
1669 |             // add a bunch of sprites
1670 | 
1671 |             this.bgFront = PIXI.Sprite.fromImage('../../_assets/SceneRotate.jpg');
1672 |             this.bgFront.anchor.x = 0.5;
1673 |             this.bgFront.anchor.y = 0.5;
1674 | 
1675 |             this.container.addChild(this.bgFront);
1676 | 
1677 |             this.light2 = PIXI.Sprite.fromImage('../../_assets/LightRotate2.png');
1678 |             this.light2.anchor.x = 0.5;
1679 |             this.light2.anchor.y = 0.5;
1680 |             this.container.addChild(this.light2);
1681 | 
1682 |             this.light1 = PIXI.Sprite.fromImage('../../_assets/LightRotate1.png');
1683 |             this.light1.anchor.x = 0.5;
1684 |             this.light1.anchor.y = 0.5;
1685 |             this.container.addChild(this.light1);
1686 | 
1687 |             this.panda = PIXI.Sprite.fromImage('../../_assets/panda.png');
1688 |             this.panda.anchor.x = 0.5;
1689 |             this.panda.anchor.y = 0.5;
1690 | 
1691 |             this.container.addChild(this.panda);
1692 | 
1693 |             this.stage.addChild(this.container);
1694 | 
1695 |             // let's create a moving shape
1696 |             this.thing = new PIXI.Graphics();
1697 |             this.stage.addChild(this.thing);
1698 |             this.thing.position.x = this.renderer.width / 2;
1699 |             this.thing.position.y = this.renderer.height / 2;
1700 |             this.thing.lineStyle(0);
1701 | 
1702 |             this.container.mask = this.thing;
1703 | 
1704 |             this.count = 0;
1705 | 
1706 |             this.stage.on('click', this.onClick);
1707 |             this.stage.on('tap', this.onClick);
1708 | 
1709 |             this.help = new PIXI.Text('Click to turn masking on / off.', { font: 'bold 12pt Arial', fill: 'white' });
1710 |             this.help.position.y = this.renderer.height - 26;
1711 |             this.help.position.x = 10;
1712 |             this.stage.addChild(this.help);
1713 | 
1714 |             // start animating
1715 |             this.animate();
1716 | 
1717 |         }
1718 | 
1719 |         private animate = (): void => {
1720 | 
1721 |             this.bg.rotation += 0.01;
1722 |             this.bgFront.rotation -= 0.01;
1723 | 
1724 |             this.light1.rotation += 0.02;
1725 |             this.light2.rotation += 0.01;
1726 | 
1727 |             this.panda.scale.x = 1 + Math.sin(this.count) * 0.04;
1728 |             this.panda.scale.y = 1 + Math.cos(this.count) * 0.04;
1729 | 
1730 |             this.count += 0.1;
1731 | 
1732 |             this.thing.clear();
1733 | 
1734 |             this.thing.beginFill(0x8bc5ff, 0.4);
1735 |             this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
1736 |             this.thing.lineTo(-320 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
1737 |             this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20);
1738 |             this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20);
1739 |             this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
1740 |             this.thing.lineTo(-120 + Math.sin(this.count) * 20, -300 + Math.cos(this.count) * 20);
1741 |             this.thing.lineTo(-320 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
1742 |             this.thing.rotation = this.count * 0.1;
1743 | 
1744 |             requestAnimationFrame(this.animate);
1745 | 
1746 |             this.renderer.render(this.stage);
1747 | 
1748 |         }
1749 | 
1750 |         private onClick = (event: PIXI.interaction.InteractionEvent): void => {
1751 | 
1752 |             if (!this.container.mask) {
1753 |                 this.container.mask = this.thing;
1754 |             }
1755 |             else {
1756 |                 this.container.mask = null;
1757 |             }
1758 |         }
1759 | 
1760 |     }
1761 | 
1762 | }
1763 | 
1764 | module demos {
1765 | 
1766 |     export class MovieClipDemo {
1767 | 
1768 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
1769 | 
1770 |         private stage: PIXI.Container;
1771 | 
1772 |         constructor() {
1773 | 
1774 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
1775 |             document.body.appendChild(this.renderer.view);
1776 | 
1777 |             // create the root of the scene graph
1778 |             this.stage = new PIXI.Container();
1779 | 
1780 |             PIXI.loader
1781 |                 .add('spritesheet', '../../_assets/mc.json')
1782 |                 .load(this.onAssetsLoaded);
1783 | 
1784 |             // start animating
1785 |             this.animate();
1786 | 
1787 |         }
1788 | 
1789 |         private onAssetsLoaded = (loader: PIXI.loaders.Loader): void => {
1790 |         
1791 |             // create an array to store the textures
1792 |             var explosionTextures: PIXI.Texture[] = [];
1793 |             var i: number;
1794 | 
1795 |             for (i = 0; i < 26; i++) {
1796 | 
1797 |                 var texture = PIXI.Texture.fromFrame('Explosion_Sequence_A ' + (i + 1) + '.png');
1798 |                 explosionTextures.push(texture);
1799 | 
1800 |             }
1801 | 
1802 |             for (i = 0; i < 50; i++) {
1803 | 
1804 |                 // create an explosion MovieClip
1805 |                 var explosion = new PIXI.extras.MovieClip(explosionTextures);
1806 | 
1807 |                 explosion.position.x = Math.random() * 800;
1808 |                 explosion.position.y = Math.random() * 600;
1809 |                 explosion.anchor.x = 0.5;
1810 |                 explosion.anchor.y = 0.5;
1811 | 
1812 |                 explosion.rotation = Math.random() * Math.PI;
1813 | 
1814 |                 explosion.scale.set(0.75 + Math.random() * 0.5);
1815 | 
1816 |                 explosion.gotoAndPlay(Math.random() * 27);
1817 | 
1818 |                 this.stage.addChild(explosion);
1819 | 
1820 |             }
1821 | 
1822 |             // start animating
1823 |             this.animate();
1824 |         }
1825 | 
1826 |         private animate = (): void => {
1827 | 
1828 |             requestAnimationFrame(this.animate);
1829 | 
1830 |             this.renderer.render(this.stage);
1831 | 
1832 |         }
1833 | 
1834 |     }
1835 | 
1836 | }
1837 | 
1838 | module demos {
1839 | 
1840 |     export class RenderTextureDemo {
1841 | 
1842 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
1843 | 
1844 |         private stage: PIXI.Container;
1845 | 
1846 |         private renderTexture: PIXI.RenderTexture;
1847 |         private renderTexture2: PIXI.RenderTexture;
1848 |         private currentTexture: PIXI.RenderTexture;
1849 | 
1850 |         private outputSprite: PIXI.Sprite;
1851 |         private stuffContainer: PIXI.Container;
1852 |         private items: PIXI.Sprite[];
1853 | 
1854 |         private count: number;
1855 | 
1856 |         constructor() {
1857 | 
1858 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
1859 |             document.body.appendChild(this.renderer.view);
1860 | 
1861 |             // create the root of the scene graph
1862 |             this.stage = new PIXI.Container();
1863 | 
1864 |             // create two render textures... these dynamic textures will be used to draw the scene into itself
1865 |             this.renderTexture = new PIXI.RenderTexture(this.renderer, this.renderer.width, this.renderer.height);
1866 |             this.renderTexture2 = new PIXI.RenderTexture(this.renderer, this.renderer.width, this.renderer.height);
1867 |             this.currentTexture = this.renderTexture;
1868 | 
1869 |             // create a new sprite that uses the render texture we created above
1870 |             this.outputSprite = new PIXI.Sprite(this.currentTexture);
1871 | 
1872 |             // align the sprite
1873 |             this.outputSprite.position.x = 400;
1874 |             this.outputSprite.position.y = 300;
1875 |             this.outputSprite.anchor.set(0.5);
1876 | 
1877 |             // add to stage
1878 |             this.stage.addChild(this.outputSprite);
1879 | 
1880 |             this.stuffContainer = new PIXI.Container();
1881 | 
1882 |             this.stuffContainer.position.x = 400;
1883 |             this.stuffContainer.position.y = 300;
1884 | 
1885 |             this.stage.addChild(this.stuffContainer);
1886 | 
1887 |             // create an array of image ids..
1888 |             var fruits = [
1889 |                 '../../_assets/spinObj_01.png',
1890 |                 '../../_assets/spinObj_02.png',
1891 |                 '../../_assets/spinObj_03.png',
1892 |                 '../../_assets/spinObj_04.png',
1893 |                 '../../_assets/spinObj_05.png',
1894 |                 '../../_assets/spinObj_06.png',
1895 |                 '../../_assets/spinObj_07.png',
1896 |                 '../../_assets/spinObj_08.png'
1897 |             ];
1898 | 
1899 |             // create an array of items
1900 |             this.items = [];
1901 | 
1902 |             // now create some items and randomly position them in the stuff container
1903 |             for (var i = 0; i < 20; i++) {
1904 | 
1905 |                 var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]);
1906 |                 item.position.x = Math.random() * 400 - 200;
1907 |                 item.position.y = Math.random() * 400 - 200;
1908 | 
1909 |                 item.anchor.set(0.5);
1910 | 
1911 |                 this.stuffContainer.addChild(item);
1912 | 
1913 |                 this.items.push(item);
1914 | 
1915 |             }
1916 | 
1917 |             // used for spinning!
1918 |             this.count = 0;
1919 | 
1920 |             // start animating
1921 |             this.animate();
1922 | 
1923 |         }
1924 | 
1925 |         private animate = (): void => {
1926 | 
1927 |             for (var i = 0; i < this.items.length; i++) {
1928 |                 // rotate each item
1929 |                 var item = this.items[i];
1930 |                 item.rotation += 0.1;
1931 |             }
1932 | 
1933 |             this.count += 0.01;
1934 | 
1935 |             // swap the buffers ...
1936 |             var temp = this.renderTexture;
1937 |             this.renderTexture = this.renderTexture2;
1938 |             this.renderTexture2 = temp;
1939 | 
1940 |             // set the new texture
1941 |             this.outputSprite.texture = this.renderTexture;
1942 | 
1943 |             // twist this up!
1944 |             this.stuffContainer.rotation -= 0.01;
1945 |             this.outputSprite.scale.set(1 + Math.sin(this.count) * 0.2);
1946 | 
1947 |             // render the stage to the texture
1948 |             // the 'true' clears the texture before the content is rendered
1949 |             this.renderTexture2.render(this.stage, null, false);
1950 | 
1951 |             // and finally render the stage
1952 |             this.renderer.render(this.stage);
1953 | 
1954 |             requestAnimationFrame(this.animate);
1955 | 
1956 |         }
1957 | 
1958 |     }
1959 | 
1960 | }
1961 | 
1962 | module demos {
1963 | 
1964 |     export class StripDemo {
1965 | 
1966 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
1967 | 
1968 |         private stage: PIXI.Container;
1969 | 
1970 |         private count: number;
1971 | 
1972 |         private points: PIXI.Point[];
1973 | 
1974 |         private strip: PIXI.mesh.Rope;
1975 | 
1976 |         private snakeContainer: PIXI.Container;
1977 | 
1978 |         private ropeLength: number;
1979 | 
1980 |         constructor() {
1981 | 
1982 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
1983 |             document.body.appendChild(this.renderer.view);
1984 | 
1985 |             // create the root of the scene graph
1986 |             this.stage = new PIXI.Container();
1987 | 
1988 |             this.count = 0;
1989 | 
1990 |             // build a rope!
1991 |             this.ropeLength = 918 / 20;
1992 | 
1993 |             this.points = [];
1994 | 
1995 |             for (var i = 0; i < 20; i++) {
1996 |                 this.points.push(new PIXI.Point(i * this.ropeLength, 0));
1997 |             }
1998 | 
1999 |             this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('../../_assets/snake.png'), this.points);
2000 |             this.strip.x = -459;
2001 | 
2002 |             this.snakeContainer = new PIXI.Container();
2003 |             this.snakeContainer.position.x = 400;
2004 |             this.snakeContainer.position.y = 300;
2005 | 
2006 |             this.snakeContainer.scale.set(800 / 1100);
2007 |             this.stage.addChild(this.snakeContainer);
2008 | 
2009 |             this.snakeContainer.addChild(this.strip);
2010 | 
2011 |             // start animating
2012 |             this.animate();
2013 | 
2014 |         }
2015 | 
2016 |         private animate = (): void => {
2017 | 
2018 |             this.count += 0.1;
2019 | 
2020 |             // make the snake
2021 |             for (var i = 0; i < this.points.length; i++) {
2022 | 
2023 |                 this.points[i].y = Math.sin((i * 0.5) + this.count) * 30;
2024 | 
2025 |                 this.points[i].x = i * this.ropeLength + Math.cos((i * 0.3) + this.count) * 20;
2026 | 
2027 |             }
2028 | 
2029 |             this.renderer.render(this.stage);
2030 | 
2031 |             requestAnimationFrame(this.animate);
2032 | 
2033 |         }
2034 | 
2035 |     }
2036 | 
2037 | }
2038 | 
2039 | module demos {
2040 | 
2041 |     export class TextDemo {
2042 | 
2043 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
2044 | 
2045 |         private stage: PIXI.Container;
2046 | 
2047 |         private bitmapFontText: PIXI.extras.BitmapText;
2048 | 
2049 |         private background: PIXI.Sprite;
2050 | 
2051 |         private textSample: PIXI.Text;
2052 | 
2053 |         private spinningText: PIXI.Text;
2054 | 
2055 |         private countingText: PIXI.Text;
2056 | 
2057 |         private count: number;
2058 | 
2059 |         constructor() {
2060 | 
2061 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
2062 |             document.body.appendChild(this.renderer.view);
2063 | 
2064 |             // create the root of the scene graph
2065 |             this.stage = new PIXI.Container();
2066 | 
2067 |             PIXI.loader
2068 |                 .add('desyrel', '../../_assets/desyrel.xml')
2069 |                 .load(this.onAssetsLoaded);
2070 | 
2071 |             // start animating
2072 |             this.animate();
2073 | 
2074 |         }
2075 | 
2076 |         private onAssetsLoaded = (): void  => {
2077 | 
2078 |             this.bitmapFontText = new PIXI.extras.BitmapText('bitmap fonts are\n now supported!', { font: '35px Desyrel', align: 'right' });
2079 | 
2080 |             this.bitmapFontText.position.x = 600 - this.bitmapFontText.textWidth;
2081 |             this.bitmapFontText.position.y = 20;
2082 | 
2083 |             this.stage.addChild(this.bitmapFontText);
2084 | 
2085 |             // add a shiny background...
2086 |             this.background = PIXI.Sprite.fromImage('../../_assets/textDemoBG.jpg');
2087 |             this.stage.addChild(this.background);
2088 | 
2089 |             // create some white text using the Snippet webfont
2090 |             this.textSample = new PIXI.Text('Pixi.js can has\n multiline text!', { font: '35px Snippet', fill: 'white', align: 'left' });
2091 |             this.textSample.position.set(20);
2092 | 
2093 |             // create a text object with a nice stroke
2094 |             this.spinningText = new PIXI.Text('I\'m fun!', { font: 'bold 60px Arial', fill: '#cc00ff', align: 'center', stroke: '#FFFFFF', strokeThickness: 6 });
2095 | 
2096 |             // setting the anchor point to 0.5 will center align the text... great for spinning!
2097 |             this.spinningText.anchor.set(0.5);
2098 |             this.spinningText.position.x = 310;
2099 |             this.spinningText.position.y = 200;
2100 | 
2101 |             // create a text object that will be updated...
2102 |             this.countingText = new PIXI.Text('COUNT 4EVAR: 0', { font: 'bold italic 60px Arvo', fill: '#3e1707', align: 'center', stroke: '#a4410e', strokeThickness: 7 });
2103 | 
2104 |             this.countingText.position.x = 310;
2105 |             this.countingText.position.y = 320;
2106 |             this.countingText.anchor.x = 0.5;
2107 | 
2108 |             this.stage.addChild(this.textSample);
2109 |             this.stage.addChild(this.spinningText);
2110 |             this.stage.addChild(this.countingText);
2111 | 
2112 |             this.count = 0;
2113 | 
2114 |         }
2115 | 
2116 |         private animate = (): void => {
2117 | 
2118 | 
2119 |             this.renderer.render(this.stage);
2120 | 
2121 |             this.count += 0.05;
2122 |             
2123 |             // update the text with a new string
2124 |             this.countingText.text = 'COUNT 4EVAR: ' + Math.floor(this.count);
2125 | 
2126 |             // let's spin the spinning text
2127 |             this.spinningText.rotation += 0.03;
2128 | 
2129 |             requestAnimationFrame(this.animate);
2130 |         }
2131 | 
2132 |     }
2133 | 
2134 | }
2135 | 
2136 | module demos {
2137 | 
2138 |     export class TextureSwap {
2139 | 
2140 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
2141 | 
2142 |         private stage: PIXI.Container;
2143 | 
2144 |         private bol: boolean;
2145 | 
2146 |         private texture: PIXI.Texture;
2147 |         private secondTexture: PIXI.Texture;
2148 | 
2149 |         private dude: PIXI.Sprite;
2150 | 
2151 |         constructor() {
2152 | 
2153 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
2154 |             document.body.appendChild(this.renderer.view);
2155 | 
2156 |             // create the root of the scene graph
2157 |             this.stage = new PIXI.Container();
2158 | 
2159 |             this.bol = false;
2160 | 
2161 |             //an image path
2162 |             this.texture = PIXI.Texture.fromImage('../../_assets/flowerTop.png');
2163 | 
2164 |             // create a second texture
2165 |             this.secondTexture = PIXI.Texture.fromImage('../../_assets/eggHead.png');
2166 | 
2167 |             // create a new Sprite using the texture
2168 |             this.dude = new PIXI.Sprite(this.texture);
2169 | 
2170 |             // center the sprites anchor point
2171 |             this.dude.anchor.set(0.5);
2172 | 
2173 |             // move the sprite to the center of the screen
2174 |             this.dude.position.x = this.renderer.width / 2;
2175 |             this.dude.position.y = this.renderer.height / 2;
2176 | 
2177 |             this.stage.addChild(this.dude);
2178 | 
2179 |             // make the sprite interactive
2180 |             this.dude.interactive = true;
2181 | 
2182 |             this.dude.on('click', (): void => {
2183 |                 this.bol = !this.bol;
2184 | 
2185 |                 if (this.bol) {
2186 |                     this.dude.texture = this.secondTexture;
2187 |                 }
2188 |                 else {
2189 |                     this.dude.texture = this.texture;
2190 |                 }
2191 |             });
2192 | 
2193 |             // start animating
2194 |             this.animate();
2195 | 
2196 |         }
2197 | 
2198 |         private animate = (): void => {
2199 | 
2200 |             // just for fun, let's rotate mr rabbit a little
2201 |             this.dude.rotation += 0.1;
2202 | 
2203 |             this.renderer.render(this.stage);
2204 | 
2205 |             requestAnimationFrame(this.animate);
2206 | 
2207 |         }
2208 | 
2209 |     }
2210 | 
2211 | }
2212 | 
2213 | module demos {
2214 | 
2215 |     export class Tinting {
2216 | 
2217 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
2218 | 
2219 |         private stage: PIXI.Container;
2220 | 
2221 |         private totalDudes: number = 10;
2222 |         private aliens: TintingDude[];
2223 | 
2224 |         private dudeBounds: PIXI.Rectangle;
2225 | 
2226 |         private tick: number;
2227 | 
2228 |         constructor() {
2229 | 
2230 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
2231 |             document.body.appendChild(this.renderer.view);
2232 | 
2233 |             // create the root of the scene graph
2234 |             this.stage = new PIXI.Container();
2235 | 
2236 |             // holder to store the aliens
2237 |             this.aliens = [];
2238 | 
2239 |             this.tick = 0;
2240 | 
2241 |             for (var i = 0; i < this.totalDudes; i++) {
2242 | 
2243 |                 // create a new Sprite that uses the image name that we just generated as its source
2244 |                 var dude = new TintingDude();
2245 | 
2246 |                 // set the anchor point so the texture is centerd on the sprite
2247 |                 dude.anchor.set(0.5);
2248 | 
2249 |                 // set a random scale for the dude - no point them all being the same size!
2250 |                 dude.scale.set(0.8 + Math.random() * 0.3);
2251 | 
2252 |                 // finally lets set the dude to be at a random position..
2253 |                 dude.position.x = Math.random() * this.renderer.width;
2254 |                 dude.position.y = Math.random() * this.renderer.height;
2255 | 
2256 |                 dude.tint = Math.random() * 0xFFFFFF;
2257 | 
2258 |                 // create some extra properties that will control movement :
2259 |                 // create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees
2260 |                 dude.direction = Math.random() * Math.PI * 2;
2261 | 
2262 |                 // this number will be used to modify the direction of the dude over time
2263 |                 dude.turningSpeed = Math.random() - 0.8;
2264 | 
2265 |                 // create a random speed for the dude between 0 - 2
2266 |                 dude.speed = 2 + Math.random() * 2;
2267 | 
2268 |                 // finally we push the dude into the aliens array so it it can be easily accessed later
2269 |                 this.aliens.push(dude);
2270 | 
2271 |                 this.stage.addChild(dude);
2272 | 
2273 |             }
2274 | 
2275 |             // create a bounding box for the little dudes
2276 |             var dudeBoundsPadding = 100;
2277 |             this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
2278 |                 -dudeBoundsPadding,
2279 |                 this.renderer.width + dudeBoundsPadding * 2,
2280 |                 this.renderer.height + dudeBoundsPadding * 2);
2281 | 
2282 |             // start animating
2283 |             this.animate();
2284 | 
2285 |         }
2286 | 
2287 |         private animate = (): void => {
2288 | 
2289 |             // iterate through the dudes and update their position
2290 |             for (var i = 0; i < this.aliens.length; i++) {
2291 | 
2292 |                 var dude = this.aliens[i];
2293 |                 dude.direction += dude.turningSpeed * 0.01;
2294 |                 dude.position.x += Math.sin(dude.direction) * dude.speed;
2295 |                 dude.position.y += Math.cos(dude.direction) * dude.speed;
2296 |                 dude.rotation = -dude.direction - Math.PI / 2;
2297 | 
2298 |                 // wrap the dudes by testing their bounds...
2299 |                 if (dude.position.x < this.dudeBounds.x) {
2300 |                     dude.position.x += this.dudeBounds.width;
2301 |                 }
2302 |                 else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) {
2303 |                     dude.position.x -= this.dudeBounds.width;
2304 |                 }
2305 | 
2306 |                 if (dude.position.y < this.dudeBounds.y) {
2307 |                     dude.position.y += this.dudeBounds.height;
2308 |                 }
2309 |                 else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) {
2310 |                     dude.position.y -= this.dudeBounds.height;
2311 |                 }
2312 | 
2313 |             }
2314 | 
2315 |             // increment the ticker
2316 |             this.tick += 0.1;
2317 | 
2318 |             requestAnimationFrame(this.animate);
2319 | 
2320 |             this.renderer.render(this.stage);
2321 | 
2322 |         }
2323 | 
2324 |     }
2325 | 
2326 |     export class TintingDude extends PIXI.Sprite {
2327 | 
2328 |         direction: number;
2329 |         speed: number;
2330 |         turningSpeed: number;
2331 | 
2332 |         constructor() {
2333 |             super(PIXI.Texture.fromImage('../../_assets/eggHead.png'));
2334 |         }
2335 | 
2336 |     }
2337 | 
2338 | }
2339 | 
2340 | module demos {
2341 | 
2342 |     export class TransparentBackground {
2343 | 
2344 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
2345 | 
2346 |         private stage: PIXI.Container;
2347 | 
2348 |         private bunny: PIXI.Sprite;
2349 | 
2350 |         constructor() {
2351 | 
2352 |             this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb, transparent: true });
2353 |             document.body.appendChild(this.renderer.view);
2354 | 
2355 |             // create the root of the scene graph
2356 |             this.stage = new PIXI.Container();
2357 | 
2358 |             // create a new Sprite from an image path.
2359 |             this.bunny = PIXI.Sprite.fromImage('../../_assets/bunny.png');
2360 | 
2361 |             // center the sprite's anchor point
2362 |             this.bunny.anchor.set(0.5);
2363 | 
2364 |             // move the sprite to the center of the screen
2365 |             this.bunny.position.x = 200;
2366 |             this.bunny.position.y = 150;
2367 | 
2368 |             this.stage.addChild(this.bunny);
2369 |             
2370 |             // start animating
2371 |             this.animate();
2372 | 
2373 |         }
2374 | 
2375 |         private animate = (): void => {
2376 | 
2377 |             // just for fun, let's rotate mr rabbit a little
2378 |             this.bunny.rotation += 0.1;
2379 | 
2380 |             this.renderer.render(this.stage);
2381 | 
2382 |             requestAnimationFrame(this.animate);
2383 | 
2384 |         }
2385 | 
2386 |     }
2387 | 
2388 | }
2389 | 
2390 | module filters {
2391 | 
2392 |     export class Blur {
2393 | 
2394 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
2395 | 
2396 |         private stage: PIXI.Container;
2397 | 
2398 |         private bg: PIXI.Sprite;
2399 | 
2400 |         private littleDudes: PIXI.Sprite;
2401 |         private littleRobot: PIXI.Sprite;
2402 | 
2403 |         private blurFilter1: PIXI.filters.BlurFilter;
2404 |         private blurFilter2: PIXI.filters.BlurFilter;
2405 | 
2406 |         private count: number;
2407 | 
2408 |         constructor() {
2409 | 
2410 |             this.renderer = PIXI.autoDetectRenderer(800, 600);
2411 |             document.body.appendChild(this.renderer.view);
2412 | 
2413 |             // create the root of the scene graph
2414 |             this.stage = new PIXI.Container();
2415 | 
2416 |             this.bg = PIXI.Sprite.fromImage('../../_assets/depth_blur_BG.jpg');
2417 |             this.bg.width = this.renderer.width;
2418 |             this.bg.height = this.renderer.height;
2419 |             this.stage.addChild(this.bg);
2420 | 
2421 |             this.littleDudes = PIXI.Sprite.fromImage('../../_assets/depth_blur_dudes.jpg');
2422 |             this.littleDudes.position.x = (this.renderer.width / 2) - 315;
2423 |             this.littleDudes.position.y = 200;
2424 |             this.stage.addChild(this.littleDudes);
2425 | 
2426 |             this.littleRobot = PIXI.Sprite.fromImage('../../_assets/depth_blur_moby.jpg');
2427 |             this.littleRobot.position.x = (this.renderer.width / 2) - 200;
2428 |             this.littleRobot.position.y = 100;
2429 |             this.stage.addChild(this.littleRobot);
2430 | 
2431 |             this.blurFilter1 = new PIXI.filters.BlurFilter();
2432 |             this.blurFilter2 = new PIXI.filters.BlurFilter();
2433 | 
2434 |             this.littleDudes.filters = [this.blurFilter1];
2435 |             this.littleRobot.filters = [this.blurFilter2];
2436 | 
2437 |             this.count = 0;
2438 | 
2439 |             //nimate
2440 |             this.animate();
2441 | 
2442 |         }
2443 | 
2444 |         private animate = (): void => {
2445 | 
2446 |             this.count += 0.005;
2447 | 
2448 |             var blurAmount = Math.cos(this.count);
2449 |             var blurAmount2 = Math.sin(this.count);
2450 | 
2451 |             this.blurFilter1.blur = 20 * (blurAmount);
2452 |             this.blurFilter2.blur = 20 * (blurAmount2);
2453 | 
2454 |             this.renderer.render(this.stage);
2455 | 
2456 |             requestAnimationFrame(this.animate);
2457 | 
2458 |         }
2459 | 
2460 |     }
2461 | 
2462 | }
2463 | 
2464 | module filters {
2465 | 
2466 |     export class DisplacementMap {
2467 | 
2468 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
2469 | 
2470 |         private stage: PIXI.Container;
2471 | 
2472 |         private container: PIXI.Container;
2473 | 
2474 |         private padding: number;
2475 | 
2476 |         private bounds: PIXI.Rectangle;
2477 | 
2478 |         private maggots: DisplacementMapDude[];
2479 | 
2480 |         private displacementSprite: PIXI.Sprite;
2481 | 
2482 |         private displacementFilter: PIXI.filters.DisplacementFilter;
2483 | 
2484 |         private ring: PIXI.Sprite;
2485 | 
2486 |         private bg: PIXI.Sprite;
2487 | 
2488 |         private count: number;
2489 | 
2490 |         constructor() {
2491 | 
2492 |             this.renderer = PIXI.autoDetectRenderer(800, 600);
2493 |             document.body.appendChild(this.renderer.view);
2494 | 
2495 |             // create the root of the scene graph
2496 |             this.stage = new PIXI.Container();
2497 |             this.stage.interactive = true;
2498 | 
2499 |             this.container = new PIXI.Container();
2500 |             this.stage.addChild(this.container);
2501 | 
2502 |             this.padding = 100;
2503 | 
2504 |             this.bounds = new PIXI.Rectangle(-this.padding, -this.padding, this.renderer.width + this.padding * 2, this.renderer.height + this.padding * 2);
2505 |             this.maggots = [];
2506 | 
2507 |             for (var i = 0; i < 20; i++) {
2508 | 
2509 |                 var maggot = new DisplacementMapDude();
2510 |                 maggot.anchor.set(0.5);
2511 |                 this.container.addChild(maggot);
2512 | 
2513 |                 maggot.direction = Math.random() * Math.PI * 2;
2514 |                 maggot.speed = 1;
2515 |                 maggot.turnSpeed = Math.random() - 0.8;
2516 | 
2517 |                 maggot.position.x = Math.random() * this.bounds.width;
2518 |                 maggot.position.y = Math.random() * this.bounds.height;
2519 | 
2520 |                 maggot.scale.set(1 + Math.random() * 0.3);
2521 |                 maggot.original = maggot.scale.clone();
2522 |                 this.maggots.push(maggot);
2523 | 
2524 |             }
2525 | 
2526 |             this.displacementSprite = PIXI.Sprite.fromImage('../../_assets/displace.png');
2527 |             this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite);
2528 | 
2529 |             this.stage.addChild(this.displacementSprite);
2530 | 
2531 |             this.container.filters = [this.displacementFilter];
2532 | 
2533 |             this.displacementFilter.scale.x = 110;
2534 |             this.displacementFilter.scale.y = 110;
2535 | 
2536 |             this.ring = PIXI.Sprite.fromImage('../../_assets/ring.png');
2537 | 
2538 |             this.ring.anchor.set(0.5);
2539 | 
2540 |             this.ring.visible = false;
2541 | 
2542 |             this.stage.addChild(this.ring);
2543 | 
2544 |             this.bg = PIXI.Sprite.fromImage('../../_assets/bkg-grass.jpg');
2545 |             this.bg.width = this.renderer.width;
2546 |             this.bg.height = this.renderer.height;
2547 | 
2548 |             this.bg.alpha = 0.4;
2549 | 
2550 |             this.container.addChild(this.bg);
2551 | 
2552 |             this.stage
2553 |                 .on('mousemove', this.onPointerMove)
2554 |                 .on('touchmove', this.onPointerMove);
2555 | 
2556 |             this.count = 0;
2557 | 
2558 |             this.animate();
2559 | 
2560 |         }
2561 | 
2562 |         private onPointerMove = (eventData: PIXI.interaction.InteractionEvent): void => {
2563 | 
2564 |             this.ring.visible = true;
2565 | 
2566 |             this.displacementSprite.x = eventData.data.global.x - 100;
2567 |             this.displacementSprite.y = eventData.data.global.y - this.displacementSprite.height / 2;
2568 | 
2569 |             this.ring.position.x = eventData.data.global.x - 25;
2570 |             this.ring.position.y = eventData.data.global.y;
2571 | 
2572 |         };
2573 | 
2574 |         private animate = (): void => {
2575 | 
2576 |             this.count += 0.05;
2577 | 
2578 |             for (var i = 0; i < this.maggots.length; i++) {
2579 |                 var maggot = this.maggots[i];
2580 | 
2581 |                 maggot.direction += maggot.turnSpeed * 0.01;
2582 |                 maggot.position.x += Math.sin(maggot.direction) * maggot.speed;
2583 |                 maggot.position.y += Math.cos(maggot.direction) * maggot.speed;
2584 | 
2585 |                 maggot.rotation = -maggot.direction - Math.PI / 2;
2586 | 
2587 |                 maggot.scale.x = maggot.original.x + Math.sin(this.count) * 0.2;
2588 | 
2589 |                 // wrap the maggots around as the crawl
2590 |                 if (maggot.position.x < this.bounds.x) {
2591 |                     maggot.position.x += this.bounds.width;
2592 |                 }
2593 |                 else if (maggot.position.x > this.bounds.x + this.bounds.width) {
2594 |                     maggot.position.x -= this.bounds.width;
2595 |                 }
2596 | 
2597 |                 if (maggot.position.y < this.bounds.y) {
2598 |                     maggot.position.y += this.bounds.height;
2599 |                 }
2600 |                 else if (maggot.position.y > this.bounds.y + this.bounds.height) {
2601 |                     maggot.position.y -= this.bounds.height;
2602 |                 }
2603 |             }
2604 | 
2605 |             this.renderer.render(this.stage);
2606 | 
2607 |             requestAnimationFrame(this.animate);
2608 | 
2609 |         };
2610 | 
2611 |     }
2612 | 
2613 |     export class DisplacementMapDude extends PIXI.Sprite {
2614 | 
2615 |         direction: number;
2616 |         speed: number;
2617 |         turnSpeed: number;
2618 |         original: PIXI.Point;
2619 | 
2620 |         constructor() {
2621 | 
2622 |             super(PIXI.Texture.fromImage('../../_assets/maggot.png'));
2623 | 
2624 |         }
2625 | 
2626 |     }
2627 | 
2628 | }
2629 | 
2630 | module filters {
2631 | 
2632 |     export class Filter {
2633 | 
2634 |         private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
2635 | 
2636 |         private stage: PIXI.Container;
2637 | 
2638 |         private background: PIXI.Sprite;
2639 | 
2640 |         private filter: PIXI.filters.ColorMatrixFilter;
2641 | 
2642 |         private container: PIXI.Container;
2643 | 
2644 |         private bgFront: PIXI.Sprite;
2645 |         private light2: PIXI.Sprite;
2646 |         private light1: PIXI.Sprite;
2647 |         private panda: PIXI.Sprite;
2648 | 
2649 |         private count: number;
2650 |         private switchy: boolean;
2651 | 
2652 |         private help: PIXI.Text;
2653 | 
2654 |         constructor() {
2655 | 
2656 |             this.renderer = PIXI.autoDetectRenderer(800, 600);
2657 |             document.body.appendChild(this.renderer.view);
2658 | 
2659 |             // create the root of the scene graph
2660 |             this.stage = new PIXI.Container();
2661 |             this.stage.interactive = true;
2662 | 
2663 |             // create a texture from an image path
2664 |             var texture: PIXI.Texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png");
2665 | 
2666 |             this.background = PIXI.Sprite.fromImage('_assets/BGrotate.jpg');
2667 |             this.background.anchor.set(0.5);
2668 | 
2669 |             this.background.position.x = this.renderer.width / 2;
2670 |             this.background.position.y = this.renderer.height / 2;
2671 | 
2672 |             this.filter = new PIXI.filters.ColorMatrixFilter();
2673 | 
2674 |             this.container = new PIXI.Container();
2675 |             this.container.position.x = this.renderer.width / 2;
2676 |             this.container.position.y = this.renderer.height / 2;
2677 | 
2678 |             this.bgFront = PIXI.Sprite.fromImage('../../_assets/SceneRotate.jpg');
2679 |             this.bgFront.anchor.set(0.5);
2680 | 
2681 |             this.container.addChild(this.bgFront);
2682 | 
2683 |             this.light2 = PIXI.Sprite.fromImage('../../_assets/LightRotate2.png');
2684 |             this.light2.anchor.set(0.5);
2685 |             this.container.addChild(this.light2);
2686 | 
2687 |             this.light1 = PIXI.Sprite.fromImage('../../_assets/LightRotate1.png');
2688 |             this.light1.anchor.set(0.5);
2689 |             this.container.addChild(this.light1);
2690 | 
2691 |             this.panda = PIXI.Sprite.fromImage('../../_assets/panda.png');
2692 |             this.panda.anchor.set(0.5);
2693 | 
2694 |             this.container.addChild(this.panda);
2695 | 
2696 |             this.stage.addChild(this.container);
2697 | 
2698 |             this.stage.filters = [this.filter];
2699 | 
2700 |             this.count = 0;
2701 |             this.switchy = false;
2702 | 
2703 |             this.stage.on('click', this.onClick);
2704 |             this.stage.on('tap', this.onClick);
2705 | 
2706 | 
2707 |             this.help = new PIXI.Text('Click to turn filters on / off.', { font: 'bold 12pt Arial', fill: 'white' });
2708 |             this.help.position.y = this.renderer.height - 25;
2709 |             this.help.position.x = 10;
2710 | 
2711 |             this.stage.addChild(this.help);
2712 | 
2713 |             //nimate
2714 |             this.animate();
2715 | 
2716 |         }
2717 | 
2718 |         private onClick = (): void => {
2719 | 
2720 |             this.switchy = !this.switchy;
2721 | 
2722 |             if (!this.switchy) {
2723 |                 this.stage.filters = [this.filter];
2724 |             }
2725 |             else {
2726 |                 this.stage.filters = null;
2727 |             }
2728 | 
2729 |         }
2730 | 
2731 |         private animate = (): void => {
2732 | 
2733 |             this.background.rotation += 0.01;
2734 |             this.bgFront.rotation -= 0.01;
2735 | 
2736 |             this.light1.rotation += 0.02;
2737 |             this.light2.rotation += 0.01;
2738 | 
2739 |             this.panda.scale.x = 1 + Math.sin(this.count) * 0.04;
2740 |             this.panda.scale.y = 1 + Math.cos(this.count) * 0.04;
2741 | 
2742 |             this.count += 0.1;
2743 | 
2744 |             var matrix = this.filter.matrix;
2745 | 
2746 |             matrix[1] = Math.sin(this.count) * 3;
2747 |             matrix[2] = Math.cos(this.count);
2748 |             matrix[3] = Math.cos(this.count) * 1.5;
2749 |             matrix[4] = Math.sin(this.count / 3) * 2;
2750 |             matrix[5] = Math.sin(this.count / 2);
2751 |             matrix[6] = Math.sin(this.count / 4);
2752 | 
2753 |             this.renderer.render(this.stage);
2754 | 
2755 |             requestAnimationFrame(this.animate);
2756 | 
2757 |         }
2758 | 
2759 |     }
2760 | 
2761 | }
2762 | 


--------------------------------------------------------------------------------