├── tslint.json ├── temp ├── README.md └── pixi.js-tests ├── tsconfig.json ├── .editorconfig ├── .gitignore ├── package.json ├── README.md └── pixi.js-tests.ts /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "prefer-for-of": false 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /temp/README.md: -------------------------------------------------------------------------------- 1 | As of 09/09/2019 the original declarations have been moved into this directory temporarily with a view to being removed entirely all being well. 2 | 3 | The main root declaration has been replaced with the Definitely Typed version. This declration and Definitely Typed are intended to be kept in sync. The file contents are identical with only filename changing. 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "lib": ["es6", "dom"], 5 | "noImplicitAny": true, 6 | "noImplicitThis": true, 7 | "strictNullChecks": false, 8 | "types": [], 9 | "noEmit": true, 10 | "forceConsistentCasingInFileNames": true 11 | }, 12 | "files": ["pixi.js.d.ts", "pixi.js-tests.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | 27 | # Jetbrains IntelliJ 28 | .idea 29 | *.iml 30 | 31 | #VS CODE 32 | .history 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pixi-typescript", 3 | "version": "4.8.8-migration", 4 | "description": "Typescript Declarations for pixi.js", 5 | "main": "pixi.js.d.ts", 6 | "types": "pixi.js.d.ts", 7 | "directories": { 8 | "example": "examples" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/pixijs/pixi-typescript.git" 16 | }, 17 | "keywords": [ 18 | "pixi.d.ts" 19 | ], 20 | "author": "pixi.js Team", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/pixijs/pixi-typescript/issues" 24 | }, 25 | "homepage": "https://github.com/pixijs/pixi-typescript#readme" 26 | } 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Typescript Definitions for Pixi.js v4.x 2 | 3 | _Note_ This repository is not intended for v5.x which ships with its own generated declarations. 4 | 5 | When using v5.x, you can use `import * as PIXI from "pixi.js"` without the need for `@types/pixi.js` 6 | 7 | ## Install 8 | 9 | The recommended install is from DefinitelyTyped using: 10 | 11 | `npm install @types/pixi.js --save-dev` 12 | 13 | This repository contains the most recent version of the declarations for pixi.js and follows the [v4.x branch](https://github.com/pixijs/pixi.js/tree/v4.x) with periodical [Releases](https://github.com/pixijs/pixi-typescript/releases) which are supposed to match pixi releases by the core team. 14 | 15 | Each release is pushed to DefinitelyTyped. 16 | 17 | Any advice, suggestions or improvements would be appreciated. 18 | -------------------------------------------------------------------------------- /pixi.js-tests.ts: -------------------------------------------------------------------------------- 1 | function basics() { 2 | class Basics { 3 | private app: PIXI.Application; 4 | 5 | private bunny: PIXI.Sprite; 6 | 7 | constructor() { 8 | this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 9 | document.body.appendChild(this.app.view); 10 | 11 | this.bunny = PIXI.Sprite.fromImage("required/assets/basics/bunny.png"); 12 | this.bunny.anchor.set(0.5); 13 | this.bunny.x = this.app.renderer.width / 2; 14 | this.bunny.y = this.app.renderer.height / 2; 15 | this.app.stage.addChild(this.bunny); 16 | 17 | this.app.ticker.add((delta: number): void => { 18 | this.bunny.rotation += 0.1 / delta; 19 | }); 20 | } 21 | } 22 | 23 | class Renderer { 24 | private renderer: PIXI.WebGLRenderer; 25 | constructor() { 26 | // Renderer should allow options from both WebGLRenderer and underlying SystemRenderer 27 | this.renderer = new PIXI.WebGLRenderer(0, 0, { backgroundColor: 0x272d37, forceFXAA: true }); 28 | } 29 | } 30 | 31 | class Click { 32 | private app: PIXI.Application; 33 | 34 | private sprite: PIXI.Sprite; 35 | 36 | constructor() { 37 | this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 38 | document.body.appendChild(this.app.view); 39 | 40 | this.sprite = PIXI.Sprite.fromImage("../../_assets/basics/bunny.png"); 41 | this.sprite.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; 42 | this.sprite.anchor.set(0.5); 43 | this.sprite.x = this.app.renderer.width / 2; 44 | this.sprite.y = this.app.renderer.height / 2; 45 | this.sprite.interactive = true; 46 | this.sprite.buttonMode = true; 47 | this.sprite.on("pointerdown", (): void => { 48 | this.sprite.scale.x *= 1.25; 49 | this.sprite.scale.y *= 1.25; 50 | }); 51 | this.app.stage.addChild(this.sprite); 52 | } 53 | } 54 | 55 | class ContainerPivot { 56 | private app: PIXI.Application; 57 | private container: PIXI.Container; 58 | 59 | constructor() { 60 | this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 61 | document.body.appendChild(this.app.view); 62 | 63 | this.container = new PIXI.Container(); 64 | this.app.stage.addChild(this.container); 65 | 66 | const texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png"); 67 | 68 | for (let i = 0; i < 25; i++) { 69 | const bunny = new PIXI.Sprite(texture); 70 | bunny.anchor.set(0.5); 71 | bunny.x = (i % 5) * 40; 72 | bunny.y = Math.floor(i / 5) * 40; 73 | this.container.addChild(bunny); 74 | } 75 | 76 | this.container.x = this.app.renderer.width / 2; 77 | this.container.y = this.app.renderer.height / 2; 78 | 79 | this.container.pivot.x = this.container.width / 2; 80 | this.container.pivot.y = this.container.height / 2; 81 | 82 | this.app.ticker.add((delta: number): void => { 83 | this.container.rotation -= 0.01 / delta; 84 | }); 85 | } 86 | } 87 | 88 | class Container { 89 | private app: PIXI.Application; 90 | private container: PIXI.Container; 91 | 92 | constructor() { 93 | this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 94 | document.body.appendChild(this.app.view); 95 | 96 | this.container = new PIXI.Container(); 97 | this.app.stage.addChild(this.container); 98 | 99 | const texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png"); 100 | 101 | for (let i = 0; i < 25; i++) { 102 | const bunny = new PIXI.Sprite(texture); 103 | bunny.anchor.set(0.5); 104 | bunny.x = (i % 5) * 40; 105 | bunny.y = Math.floor(i / 5) * 40; 106 | this.container.addChild(bunny); 107 | } 108 | 109 | this.container.x = this.app.renderer.width / 2; 110 | this.container.y = this.app.renderer.height / 2; 111 | } 112 | } 113 | 114 | class CustomizedFilter extends PIXI.Filter { 115 | constructor(fragmentSource: string) { 116 | super(null, fragmentSource, { 117 | customUniform: { 118 | type: "1f", 119 | value: 0 120 | } 121 | }); 122 | } 123 | } 124 | class CustomFilter { 125 | private app: PIXI.Application; 126 | private background: PIXI.Sprite; 127 | private filter: CustomizedFilter; 128 | 129 | constructor() { 130 | this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 131 | document.body.appendChild(this.app.view); 132 | 133 | this.background = PIXI.Sprite.fromImage("required/assets/bkg-grass.jpg"); 134 | this.background.width = this.app.renderer.width; 135 | this.background.height = this.app.renderer.height; 136 | this.app.stage.addChild(this.background); 137 | 138 | this.app.stop(); 139 | 140 | PIXI.loader 141 | .add("shader", "_assets/basics/shader.frag") 142 | .load((loader: PIXI.loaders.Loader, resource: any): void => { 143 | this.filter = new PIXI.Filter(null, resource.shader.data); 144 | this.background.filters = [this.filter]; 145 | this.app.start(); 146 | 147 | this.app.ticker.add((delta: number) => { 148 | this.filter.uniforms.customUniform += 0.04 / delta; 149 | }); 150 | }); 151 | } 152 | } 153 | 154 | class Graphics { 155 | private app: PIXI.Application; 156 | private graphics: PIXI.Graphics; 157 | 158 | constructor() { 159 | this.app = new PIXI.Application(800, 600, { antialias: true }); 160 | document.body.appendChild(this.app.view); 161 | 162 | const graphics = new PIXI.Graphics(); 163 | 164 | // set a fill and line style 165 | graphics.beginFill(0xff3300); 166 | graphics.lineStyle(4, 0xffd900, 1); 167 | 168 | // draw a shape 169 | graphics.moveTo(50, 50); 170 | graphics.lineTo(250, 50); 171 | graphics.lineTo(100, 100); 172 | graphics.lineTo(50, 50); 173 | graphics.endFill(); 174 | 175 | // set a fill and a line style again and draw a rectangle 176 | graphics.lineStyle(2, 0x0000ff, 1); 177 | graphics.beginFill(0xff700b, 1); 178 | graphics.drawRect(50, 250, 120, 120); 179 | 180 | // draw a rounded rectangle 181 | graphics.lineStyle(2, 0xff00ff, 1); 182 | graphics.beginFill(0xff00bb, 0.25); 183 | graphics.drawRoundedRect(150, 450, 300, 100, 15); 184 | graphics.endFill(); 185 | 186 | // draw a circle, set the lineStyle to zero so the circle doesn"t have an outline 187 | graphics.lineStyle(0); 188 | graphics.beginFill(0xffff0b, 0.5); 189 | graphics.drawCircle(470, 90, 60); 190 | graphics.endFill(); 191 | 192 | this.graphics = graphics; 193 | 194 | this.app.stage.addChild(this.graphics); 195 | } 196 | } 197 | 198 | class RenderTexture { 199 | private app: PIXI.Application; 200 | private container: PIXI.Container; 201 | private renderTexture: PIXI.RenderTexture; 202 | private sprite: PIXI.Sprite; 203 | 204 | constructor() { 205 | this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 206 | document.body.appendChild(this.app.view); 207 | 208 | this.container = new PIXI.Container(); 209 | this.app.stage.addChild(this.container); 210 | 211 | const texture = PIXI.Texture.fromImage("required/assets/basics/bunny.png"); 212 | 213 | for (let i = 0; i < 25; i++) { 214 | const bunny = new PIXI.Sprite(texture); 215 | bunny.x = (i % 5) * 30; 216 | bunny.y = Math.floor(i / 5) * 30; 217 | bunny.rotation = Math.random() * (Math.PI * 2); 218 | this.container.addChild(bunny); 219 | } 220 | 221 | const brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1); 222 | const rt = new PIXI.RenderTexture(brt); 223 | 224 | this.sprite = new PIXI.Sprite(rt); 225 | this.sprite.x = 450; 226 | this.sprite.y = 60; 227 | this.app.stage.addChild(this.sprite); 228 | 229 | this.container.x = 100; 230 | this.container.y = 60; 231 | 232 | this.app.ticker.add((delta: number) => { 233 | this.app.renderer.render(this.container, rt); 234 | }); 235 | } 236 | } 237 | 238 | class SpriteSheet { 239 | private app: PIXI.Application; 240 | private anim: PIXI.extras.AnimatedSprite; 241 | 242 | constructor() { 243 | PIXI.loader 244 | .add("required/assets/basics/fighter.json") 245 | .load((loader: PIXI.loaders.Loader, resource: any) => { 246 | const frames = []; 247 | 248 | for (let i = 0; i < 30; i++) { 249 | const val = i < 10 ? "0" + i : i; 250 | 251 | frames.push(PIXI.Texture.fromFrame(`rollSequence00${val}.png`)); 252 | } 253 | 254 | this.anim = new PIXI.extras.AnimatedSprite(frames); 255 | 256 | this.anim.x = this.app.renderer.width / 2; 257 | this.anim.y = this.app.renderer.height / 2; 258 | this.anim.anchor.set(0.5); 259 | this.anim.animationSpeed = 0.5; 260 | this.anim.play(); 261 | 262 | this.app.stage.addChild(this.anim); 263 | 264 | this.app.ticker.add((deltaTime: number) => { 265 | this.anim.rotation += 0.01; 266 | }); 267 | }); 268 | } 269 | } 270 | 271 | class Text { 272 | private app: PIXI.Application; 273 | private basicText: PIXI.Text; 274 | private richText: PIXI.Text; 275 | 276 | constructor() { 277 | this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 278 | document.body.appendChild(this.app.view); 279 | 280 | this.basicText = new PIXI.Text("Basic text in pixi"); 281 | this.basicText.x = 30; 282 | this.basicText.y = 90; 283 | this.app.stage.addChild(this.basicText); 284 | 285 | const style = new PIXI.TextStyle({ 286 | fontFamily: "Arial", 287 | fontSize: 36, 288 | fontStyle: "italic", 289 | fontWeight: "bold", 290 | fill: ["#ffffff", "#fff0b5"], 291 | stroke: "#4a1850", 292 | strokeThickness: 5, 293 | dropShadow: true, 294 | dropShadowColor: "#000000", 295 | dropShadowBlur: 4, 296 | dropShadowAngle: Math.PI / 6, 297 | dropShadowDistance: 6, 298 | wordWrap: true, 299 | wordWrapWidth: 440 300 | }); 301 | 302 | this.richText = new PIXI.Text("Rich text with a lot of options and across multiple lines", style); 303 | this.richText.x = 30; 304 | this.richText.y = 180; 305 | this.app.stage.addChild(this.richText); 306 | } 307 | } 308 | 309 | class TexturedMesh { 310 | private app: PIXI.Application; 311 | private count: number; 312 | private points: PIXI.Point[]; 313 | private strip: PIXI.mesh.Rope; 314 | private graphics: PIXI.Graphics; 315 | 316 | constructor() { 317 | const ropeLength = 918 / 20; 318 | 319 | for (let i = 0; i < 25; i++) { 320 | this.points.push(new PIXI.Point(i * ropeLength, 0)); 321 | } 322 | 323 | this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage("required/assets/snake.png"), this.points); 324 | this.strip.x = -40; 325 | this.strip.y = 300; 326 | this.app.stage.addChild(this.strip); 327 | 328 | this.graphics = new PIXI.Graphics(); 329 | this.graphics.x = this.strip.x; 330 | this.graphics.y = this.strip.y; 331 | this.app.stage.addChild(this.graphics); 332 | 333 | // start animating 334 | this.app.ticker.add((deltaTime: number) => { 335 | this.count += 0.1; 336 | 337 | // make the snake 338 | for (let i = 0; i < this.points.length; i++) { 339 | this.points[i].y = Math.sin(i * 0.5 + this.count) * 30; 340 | this.points[i].x = i * ropeLength + Math.cos(i * 0.3 + this.count) * 20; 341 | } 342 | this.renderPoints(); 343 | }); 344 | } 345 | 346 | private renderPoints(): void { 347 | this.graphics.clear(); 348 | this.graphics.lineStyle(2, 0xffc2c2); 349 | this.graphics.moveTo(this.points[0].x, this.points[0].y); 350 | 351 | for (let i = 1; i < this.points.length; i++) { 352 | this.graphics.lineTo(this.points[i].x, this.points[i].y); 353 | } 354 | 355 | for (let i = 1; i < this.points.length; i++) { 356 | this.graphics.beginFill(0xff0022); 357 | this.graphics.drawCircle(this.points[i].x, this.points[i].y, 10); 358 | this.graphics.endFill(); 359 | } 360 | } 361 | } 362 | 363 | class TilingSprite { 364 | private app: PIXI.Application; 365 | private tilingSprite: PIXI.extras.TilingSprite; 366 | private count: number; 367 | 368 | constructor() { 369 | this.app = new PIXI.Application(); 370 | document.body.appendChild(this.app.view); 371 | 372 | const texture = PIXI.Texture.fromImage("required/assets/p2.jpeg"); 373 | 374 | this.tilingSprite = new PIXI.extras.TilingSprite( 375 | texture, 376 | this.app.renderer.width, 377 | this.app.renderer.height 378 | ); 379 | this.app.stage.addChild(this.tilingSprite); 380 | 381 | this.count = 0; 382 | 383 | this.app.ticker.add((deltaTime: number): void => { 384 | this.count += 0.005; 385 | 386 | this.tilingSprite.tileScale.x = 2 + Math.sin(this.count); 387 | this.tilingSprite.tileScale.y = 2 + Math.cos(this.count); 388 | this.tilingSprite.tilePosition.x += 1; 389 | this.tilingSprite.tilePosition.y += 1; 390 | }); 391 | } 392 | } 393 | 394 | class Video { 395 | private app: PIXI.Application; 396 | private button: PIXI.Graphics; 397 | private videoSprite: PIXI.Sprite; 398 | 399 | constructor() { 400 | this.app = new PIXI.Application(800, 600, { transparent: true }); 401 | document.body.appendChild(this.app.view); 402 | 403 | this.button = new PIXI.Graphics() 404 | .beginFill(0x0, 0.5) 405 | .drawRoundedRect(0, 0, 100, 100, 10) 406 | .endFill() 407 | .beginFill(0xffffff) 408 | .moveTo(36, 30) 409 | .lineTo(36, 70) 410 | .lineTo(70, 50); 411 | 412 | // Position the button 413 | this.button.x = (this.app.renderer.width - this.button.width) / 2; 414 | this.button.y = (this.app.renderer.height - this.button.height) / 2; 415 | 416 | // Enable interactivity on the button 417 | this.button.interactive = true; 418 | this.button.buttonMode = true; 419 | 420 | // Add to the stage 421 | this.app.stage.addChild(this.button); 422 | 423 | this.button.on("pointertap", (): void => { 424 | this.button.destroy(); 425 | 426 | const texture = PIXI.Texture.fromVideo("required/assets/testVideo.mp4"); 427 | 428 | this.videoSprite = new PIXI.Sprite(texture); 429 | this.videoSprite.width = this.app.renderer.width; 430 | this.videoSprite.height = this.app.renderer.height; 431 | this.app.stage.addChild(this.videoSprite); 432 | }); 433 | } 434 | } 435 | } 436 | 437 | function demos() { 438 | class AlphaMask { 439 | private app: PIXI.Application; 440 | private bg: PIXI.Container; 441 | private cells: PIXI.Sprite; 442 | private mask: PIXI.Sprite; 443 | private target: PIXI.Point; 444 | 445 | constructor() { 446 | this.app = new PIXI.Application(); 447 | this.app.stage.interactive = true; 448 | document.body.appendChild(this.app.view); 449 | 450 | this.bg = PIXI.Sprite.fromImage("required/assets/bkg.jpg"); 451 | this.app.stage.addChild(this.bg); 452 | 453 | this.cells = PIXI.Sprite.fromImage("required/assets/cells.png"); 454 | this.cells.scale.set(1.5); 455 | 456 | this.mask = PIXI.Sprite.fromImage("required/assets/flowerTop.png"); 457 | this.mask.anchor.set(0.5); 458 | this.mask.x = 310; 459 | this.mask.y = 190; 460 | 461 | this.cells.mask = this.mask; 462 | 463 | this.app.stage.addChild(this.mask, this.cells); 464 | 465 | this.target = new PIXI.Point(); 466 | 467 | this.reset(); 468 | 469 | this.app.ticker.add((deltaTime: number): void => { 470 | this.mask.position.x += (this.target.x - this.mask.x) * 0.1; 471 | this.mask.position.y += (this.target.y - this.mask.y) * 0.1; 472 | 473 | if (Math.abs(this.mask.x - this.target.x) < 1) { 474 | this.reset(); 475 | } 476 | }); 477 | } 478 | 479 | private reset(): void { 480 | this.target.x = Math.floor(Math.random() * 550); 481 | this.target.y = Math.floor(Math.random() * 300); 482 | } 483 | } 484 | 485 | class AnimatedSpriteDemo { 486 | private app: PIXI.Application; 487 | 488 | constructor() { 489 | this.app = new PIXI.Application(); 490 | this.app.stop(); 491 | document.body.appendChild(this.app.view); 492 | 493 | PIXI.loader.add("spritesheet", "required/assets/mc.json").load((): void => { 494 | const explosionTextures: PIXI.Texture[] = []; 495 | 496 | for (let i = 0; i < 26; i++) { 497 | const texture = PIXI.Texture.fromFrame(`Explosion_Sequence_A ${i + 1}.png`); 498 | explosionTextures.push(texture); 499 | } 500 | 501 | for (let i = 0; i < 50; i++) { 502 | const explosion = new PIXI.extras.AnimatedSprite(explosionTextures); 503 | 504 | explosion.x = Math.random() * this.app.renderer.width; 505 | explosion.y = Math.random() * this.app.renderer.height; 506 | explosion.anchor.set(0.5); 507 | explosion.rotation = Math.random() * Math.PI; 508 | explosion.scale.set(0.75 + Math.random() * 0.5); 509 | explosion.gotoAndPlay(Math.random() * 27); 510 | this.app.stage.addChild(explosion); 511 | } 512 | 513 | this.app.start(); 514 | }); 515 | } 516 | } 517 | 518 | class Batch { 519 | private app: PIXI.Application; 520 | private sprites: PIXI.particles.ParticleContainer; 521 | private maggots: Dude[]; 522 | private dudeBounds: PIXI.Rectangle; 523 | private tick: number; 524 | 525 | constructor() { 526 | this.app = new PIXI.Application(); 527 | document.body.appendChild(this.app.view); 528 | 529 | this.sprites = new PIXI.particles.ParticleContainer(10000, { 530 | scale: true, 531 | position: true, 532 | rotation: true, 533 | uvs: true, 534 | tint: true 535 | }); 536 | this.app.stage.addChild(this.sprites); 537 | 538 | this.maggots = []; 539 | 540 | const totalSprites = this.app.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; 541 | 542 | const dudeTexture = PIXI.Texture.fromImage("required/assets/tinyMaggot.png"); 543 | 544 | for (let i = 0; i < totalSprites; i++) { 545 | const dude = new Dude(dudeTexture); 546 | dude.tint = Math.random() * 0xe8d4cd; 547 | dude.anchor.set(0.5); 548 | dude.scale.set(0.8 + Math.random() * 0.3); 549 | dude.x = Math.random() * this.app.renderer.width; 550 | dude.y = Math.random() * this.app.renderer.height; 551 | dude.direction = Math.random() * Math.PI * 2; 552 | dude.turningSpeed = Math.random() - 0.8; 553 | dude.speed = (2 + Math.random() * 2) * 0.2; 554 | dude.offset = Math.random() * 100; 555 | 556 | this.maggots.push(dude); 557 | this.sprites.addChild(dude); 558 | } 559 | 560 | const dudeBoundsPadding = 100; 561 | this.dudeBounds = new PIXI.Rectangle( 562 | -dudeBoundsPadding, 563 | -dudeBoundsPadding, 564 | this.app.renderer.width + dudeBoundsPadding * 2, 565 | this.app.renderer.height + dudeBoundsPadding * 2 566 | ); 567 | 568 | this.tick = 0; 569 | 570 | this.app.ticker.add((): void => { 571 | for (const dude of this.maggots) { 572 | dude.scale.y = 0.95 + Math.sin(this.tick + dude.offset) * 0.05; 573 | dude.direction += dude.turningSpeed * 0.01; 574 | dude.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y); 575 | dude.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y); 576 | dude.rotation = -dude.direction + Math.PI; 577 | 578 | // wrap the maggots 579 | if (dude.x < this.dudeBounds.x) { 580 | dude.x += this.dudeBounds.width; 581 | } else if (dude.x > this.dudeBounds.x + this.dudeBounds.width) { 582 | dude.x -= this.dudeBounds.width; 583 | } 584 | 585 | if (dude.y < this.dudeBounds.y) { 586 | dude.y += this.dudeBounds.height; 587 | } else if (dude.y > this.dudeBounds.y + this.dudeBounds.height) { 588 | dude.y -= this.dudeBounds.height; 589 | } 590 | } 591 | 592 | this.tick += 0.1; 593 | }); 594 | } 595 | } 596 | class Dude extends PIXI.Sprite { 597 | direction: number = 0; 598 | speed: number = 0; 599 | turningSpeed: number = 0; 600 | offset: number = 0; 601 | 602 | constructor(texture: PIXI.Texture) { 603 | super(texture); 604 | } 605 | } 606 | 607 | class BlendModes { 608 | private app: PIXI.Application; 609 | private background: PIXI.Sprite; 610 | private dudeArray: Dude[]; 611 | private dudeBounds: PIXI.Rectangle; 612 | 613 | constructor() { 614 | this.app = new PIXI.Application(); 615 | document.body.appendChild(this.app.view); 616 | 617 | this.background = PIXI.Sprite.fromImage("required/assets/BGrotate.jpg"); 618 | this.app.stage.addChild(this.background); 619 | 620 | this.dudeArray = []; 621 | 622 | const totalDudes = 20; 623 | const dudeTexture = PIXI.Texture.fromImage("required/assets/flowerTop.png"); 624 | 625 | for (let i = 0; i < totalDudes; i++) { 626 | const dude = new Dude(dudeTexture); 627 | dude.anchor.set(0.5); 628 | dude.scale.set(0.8 + Math.random() * 0.3); 629 | dude.x = Math.floor(Math.random() * this.app.renderer.width); 630 | dude.y = Math.floor(Math.random() * this.app.renderer.height); 631 | dude.blendMode = PIXI.BLEND_MODES.ADD; 632 | dude.direction = Math.random() * Math.PI * 2; 633 | dude.turningSpeed = Math.random() - 0.8; 634 | dude.speed = 2 + Math.random() * 2; 635 | 636 | this.dudeArray.push(dude); 637 | this.app.stage.addChild(dude); 638 | } 639 | 640 | const dudeBoundsPadding = 100; 641 | this.dudeBounds = new PIXI.Rectangle( 642 | -dudeBoundsPadding, 643 | -dudeBoundsPadding, 644 | this.app.renderer.width + dudeBoundsPadding * 2, 645 | this.app.renderer.height + dudeBoundsPadding * 2 646 | ); 647 | 648 | this.app.ticker.add((): void => { 649 | for (const dude of this.dudeArray) { 650 | dude.direction += dude.turningSpeed * 0.01; 651 | dude.x += Math.sin(dude.direction) * dude.speed; 652 | dude.y += Math.cos(dude.direction) * dude.speed; 653 | dude.rotation = -dude.direction - Math.PI / 2; 654 | 655 | // wrap the dudes by testing their bounds... 656 | if (dude.x < this.dudeBounds.x) { 657 | dude.x += this.dudeBounds.width; 658 | } else if (dude.x > this.dudeBounds.x + this.dudeBounds.width) { 659 | dude.x -= this.dudeBounds.width; 660 | } 661 | 662 | if (dude.y < this.dudeBounds.y) { 663 | dude.y += this.dudeBounds.height; 664 | } else if (dude.y > this.dudeBounds.y + this.dudeBounds.height) { 665 | dude.y -= this.dudeBounds.height; 666 | } 667 | } 668 | }); 669 | } 670 | } 671 | 672 | class CacheAsBitmap { 673 | private app: PIXI.Application; 674 | private aliens: PIXI.Sprite[]; 675 | private count: number; 676 | private alienContainer: PIXI.Container; 677 | 678 | constructor() { 679 | this.app = new PIXI.Application(); 680 | this.app.stage.interactive = true; 681 | document.body.appendChild(this.app.view); 682 | 683 | this.app.stop(); 684 | 685 | this.aliens = []; 686 | const alienFrames = ["eggHead.png", "flowerTop.png", "helmlok.png", "skully.png"]; 687 | 688 | this.count = 0; 689 | 690 | this.alienContainer = new PIXI.Container(); 691 | this.alienContainer.x = 400; 692 | this.alienContainer.y = 300; 693 | this.app.stage.addChild(this.alienContainer); 694 | 695 | PIXI.loader.add("spritesheet", "required/assets/monsters.json").load((): void => { 696 | for (let i = 0; i < 100; i++) { 697 | const frameName = alienFrames[i % 4]; 698 | 699 | const alien = PIXI.Sprite.fromFrame(frameName); 700 | alien.tint = Math.random() * 0xffffff; 701 | alien.x = Math.random() * 800 - 400; 702 | alien.y = Math.random() * 600 - 300; 703 | alien.anchor.x = 0.5; 704 | alien.anchor.y = 0.5; 705 | this.aliens.push(alien); 706 | this.alienContainer.addChild(alien); 707 | } 708 | this.app.start(); 709 | 710 | this.app.stage.on("pointerTap", (event: PIXI.interaction.InteractionEvent): void => { 711 | this.alienContainer.cacheAsBitmap = !this.alienContainer.cacheAsBitmap; 712 | }); 713 | this.app.ticker.add((): void => { 714 | // let"s rotate the aliens a little bit 715 | for (let i = 0; i < 100; i++) { 716 | const alien = this.aliens[i]; 717 | alien.rotation += 0.1; 718 | } 719 | 720 | this.count += 0.01; 721 | 722 | this.alienContainer.scale.x = Math.sin(this.count); 723 | this.alienContainer.scale.y = Math.sin(this.count); 724 | this.alienContainer.rotation += 0.01; 725 | }); 726 | }); 727 | } 728 | } 729 | 730 | class Dragging { 731 | private app: PIXI.Application; 732 | private data: PIXI.interaction.InteractionData; 733 | private dragging: boolean; 734 | 735 | constructor() { 736 | this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb }); 737 | document.body.appendChild(this.app.view); 738 | 739 | const texture = PIXI.Texture.fromImage("required/assets/bunny.png"); 740 | texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; 741 | 742 | for (let i = 0; i < 10; i++) { 743 | this.createBunny( 744 | texture, 745 | Math.floor(Math.random() * this.app.renderer.width), 746 | Math.floor(Math.random() * this.app.renderer.height) 747 | ); 748 | } 749 | } 750 | 751 | private createBunny(texture: PIXI.Texture, x: number, y: number): void { 752 | const bunny = new PIXI.Sprite(texture); 753 | bunny.interactive = true; 754 | bunny.buttonMode = true; 755 | bunny.anchor.set(0.5); 756 | bunny.scale.set(3); 757 | bunny 758 | .on("pointerdown", (event: PIXI.interaction.InteractionEvent): void => { 759 | this.data = event.data; 760 | bunny.alpha = 0.5; 761 | this.dragging = true; 762 | }) 763 | .on("pointerup", (event: PIXI.interaction.InteractionEvent): void => { 764 | this.data = null; 765 | bunny.alpha = 0.5; 766 | this.dragging = false; 767 | }) 768 | .on("pointerupoutside", (event: PIXI.interaction.InteractionEvent): void => { 769 | this.data = null; 770 | bunny.alpha = 0.5; 771 | this.dragging = false; 772 | }) 773 | .on("pointermove", (event: PIXI.interaction.InteractionEvent): void => { 774 | if (this.dragging) { 775 | const newPosition = this.data.getLocalPosition(bunny); 776 | bunny.x = newPosition.x; 777 | bunny.y = newPosition.y; 778 | } 779 | }); 780 | 781 | bunny.x = x; 782 | bunny.y = y; 783 | 784 | this.app.stage.addChild(bunny); 785 | } 786 | } 787 | 788 | class GraphicsDemo { 789 | private app: PIXI.Application; 790 | private graphics: PIXI.Graphics; 791 | private thing: PIXI.Graphics; 792 | private count: number; 793 | 794 | constructor() { 795 | this.app = new PIXI.Application(800, 600, { antialias: true }); 796 | this.app.stage.interactive = true; 797 | document.body.appendChild(this.app.view); 798 | 799 | const graphics = new PIXI.Graphics(); 800 | 801 | graphics.beginFill(0xff3300); 802 | graphics.lineStyle(10, 0xffd900, 1); 803 | 804 | graphics.moveTo(50, 50); 805 | graphics.lineTo(250, 50); 806 | graphics.lineTo(100, 100); 807 | graphics.lineTo(250, 220); 808 | graphics.lineTo(50, 220); 809 | graphics.lineTo(50, 50); 810 | graphics.endFill(); 811 | 812 | graphics.lineStyle(10, 0xff0000, 0.8); 813 | graphics.beginFill(0xff700b, 1); 814 | 815 | graphics.moveTo(210, 300); 816 | graphics.lineTo(450, 320); 817 | graphics.lineTo(570, 350); 818 | graphics.quadraticCurveTo(600, 0, 480, 100); 819 | graphics.lineTo(330, 120); 820 | graphics.lineTo(410, 200); 821 | graphics.lineTo(210, 300); 822 | graphics.endFill(); 823 | 824 | graphics.lineStyle(2, 0x0000ff, 1); 825 | graphics.drawRect(50, 250, 100, 100); 826 | 827 | graphics.lineStyle(0); 828 | graphics.beginFill(0xffff0b, 0.5); 829 | graphics.drawCircle(470, 200, 100); 830 | graphics.endFill(); 831 | 832 | graphics.lineStyle(20, 0x33ff00); 833 | graphics.moveTo(30, 30); 834 | graphics.lineTo(600, 300); 835 | 836 | this.graphics = graphics; 837 | 838 | this.app.stage.addChild(this.graphics); 839 | 840 | this.thing = new PIXI.Graphics(); 841 | this.thing.x = 800 / 2; 842 | this.thing.y = 600 / 2; 843 | this.app.stage.addChild(this.thing); 844 | 845 | this.count = 0; 846 | 847 | this.app.stage.on("pointertap", (): void => { 848 | this.graphics.lineStyle(Math.random() * 30, Math.random() * 0xffffff, 1); 849 | this.graphics.moveTo(Math.random() * 800, Math.random() * 600); 850 | this.graphics.bezierCurveTo( 851 | Math.random() * 800, 852 | Math.random() * 600, 853 | Math.random() * 800, 854 | Math.random() * 600, 855 | Math.random() * 800, 856 | Math.random() * 600 857 | ); 858 | }); 859 | 860 | this.app.ticker.add((): void => { 861 | this.count += 0.1; 862 | 863 | this.thing.clear(); 864 | this.thing.lineStyle(10, 0xff0000, 1); 865 | this.thing.beginFill(0xffff00, 0.5); 866 | 867 | this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); 868 | this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20); 869 | this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20); 870 | this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20); 871 | this.thing.lineTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); 872 | 873 | this.thing.rotation = this.count * 0.1; 874 | }); 875 | } 876 | } 877 | 878 | class Interactivity { 879 | private app: PIXI.Application; 880 | private background: PIXI.Sprite; 881 | private buttons: PIXI.Sprite[]; 882 | 883 | constructor() { 884 | this.app = new PIXI.Application(); 885 | document.body.appendChild(this.app.view); 886 | 887 | const background = PIXI.Sprite.fromImage("required/assets/button_test_BG.jpg"); 888 | background.width = this.app.renderer.width; 889 | background.height = this.app.renderer.height; 890 | this.background = background; 891 | this.app.stage.addChild(this.background); 892 | 893 | this.buttons = []; 894 | 895 | const buttonPositions = [175, 75, 655, 75, 410, 325, 150, 465, 685, 445]; 896 | 897 | const textureButton = PIXI.Texture.fromImage("../../_assets/button.png"); 898 | const textureButtonDown = PIXI.Texture.fromImage("../../_assets/buttonDown.png"); 899 | const textureButtonOver = PIXI.Texture.fromImage("../../_assets/buttonOver.png"); 900 | 901 | for (let i = 0; i < 5; i++) { 902 | const button = new PIXI.Sprite(textureButton); 903 | button.anchor.set(0.5); 904 | button.x = buttonPositions[i * 2]; 905 | button.y = buttonPositions[i * 2 + 1]; 906 | button.interactive = true; 907 | button.buttonMode = true; 908 | 909 | button 910 | .on("pointerdown", (): void => { 911 | // blah 912 | }) 913 | .on("pointerup", (): void => { 914 | // blah 915 | }) 916 | .on("pointerupoutside", (): void => { 917 | // blah 918 | }) 919 | .on("pointerover", (): void => { 920 | // blah 921 | }) 922 | .on("pointerout", (): void => { 923 | // blah 924 | }); 925 | 926 | this.app.stage.addChild(button); 927 | this.buttons.push(button); 928 | } 929 | 930 | this.buttons[0].scale.set(1.2); 931 | this.buttons[2].rotation = Math.PI / 10; 932 | this.buttons[3].scale.set(0.8); 933 | this.buttons[4].scale.set(0.8, 1.2); 934 | this.buttons[4].rotation = Math.PI; 935 | } 936 | } 937 | 938 | class Masking { 939 | private app: PIXI.Application; 940 | private bg: PIXI.Sprite; 941 | private container: PIXI.Container; 942 | private bgFront: PIXI.Sprite; 943 | private light1: PIXI.Sprite; 944 | private light2: PIXI.Sprite; 945 | private panda: PIXI.Sprite; 946 | private thing: PIXI.Graphics; 947 | private count: number; 948 | private help: PIXI.Text; 949 | 950 | constructor() { 951 | this.app = new PIXI.Application(800, 600, { antialias: true }); 952 | this.app.stage.interactive = true; 953 | document.body.appendChild(this.app.view); 954 | 955 | this.bg = PIXI.Sprite.fromImage("required/assets/BGrotate.jpg"); 956 | this.bg.anchor.set(0.5); 957 | this.bg.x = this.app.renderer.width / 2; 958 | this.bg.y = this.app.renderer.height / 2; 959 | this.app.stage.addChild(this.bg); 960 | 961 | this.container = new PIXI.Container(); 962 | this.container.x = this.app.renderer.width / 2; 963 | this.container.y = this.app.renderer.height / 2; 964 | this.app.stage.addChild(this.container); 965 | 966 | this.bgFront = PIXI.Sprite.fromImage("required/assets/SceneRotate.jpg"); 967 | this.bgFront.anchor.set(0.5); 968 | 969 | this.light2 = PIXI.Sprite.fromImage("required/assets/LightRotate2.png"); 970 | this.light2.anchor.set(0.5); 971 | 972 | this.light1 = PIXI.Sprite.fromImage("required/assets/LightRotate1.png"); 973 | this.light1.anchor.set(0.5); 974 | 975 | this.panda = PIXI.Sprite.fromImage("required/assets/panda.png"); 976 | this.panda.anchor.set(0.5); 977 | 978 | this.container.addChild(this.bgFront, this.light2, this.light1, this.panda); 979 | 980 | this.app.stage.addChild(this.container); 981 | 982 | this.thing = new PIXI.Graphics(); 983 | this.app.stage.addChild(this.thing); 984 | this.thing.x = this.app.renderer.width / 2; 985 | this.thing.y = this.app.renderer.height / 2; 986 | this.thing.lineStyle(0); 987 | this.container.mask = this.thing; 988 | 989 | this.count = 0; 990 | 991 | this.app.stage.on("pointertap", (): void => { 992 | if (!this.container.mask) { 993 | this.container.mask = this.thing; 994 | } else { 995 | this.container.mask = null; 996 | } 997 | }); 998 | 999 | this.app.ticker.add((): void => { 1000 | this.bg.rotation += 0.01; 1001 | this.bgFront.rotation -= 0.01; 1002 | 1003 | this.light1.rotation += 0.02; 1004 | this.light2.rotation += 0.01; 1005 | 1006 | this.panda.scale.x = 1 + Math.sin(this.count) * 0.04; 1007 | this.panda.scale.y = 1 + Math.cos(this.count) * 0.04; 1008 | 1009 | this.count += 0.1; 1010 | 1011 | this.thing.clear(); 1012 | 1013 | this.thing.beginFill(0x8bc5ff, 0.4); 1014 | this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); 1015 | this.thing.lineTo(-320 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20); 1016 | this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20); 1017 | this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20); 1018 | this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20); 1019 | this.thing.lineTo(-120 + Math.sin(this.count) * 20, -300 + Math.cos(this.count) * 20); 1020 | this.thing.lineTo(-320 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); 1021 | this.thing.rotation = this.count * 0.1; 1022 | }); 1023 | } 1024 | } 1025 | 1026 | class RenderTextureDemo { 1027 | private app: PIXI.Application; 1028 | 1029 | private renderTexture: PIXI.RenderTexture; 1030 | private renderTexture2: PIXI.RenderTexture; 1031 | private currentTexture: PIXI.RenderTexture; 1032 | 1033 | private outputSprite: PIXI.Sprite; 1034 | private stuffContainer: PIXI.Container; 1035 | 1036 | private items: PIXI.Sprite[]; 1037 | 1038 | private count: number; 1039 | 1040 | constructor() { 1041 | this.app = new PIXI.Application(); 1042 | document.body.appendChild(this.app.view); 1043 | 1044 | this.renderTexture = PIXI.RenderTexture.create(this.app.renderer.width, this.app.renderer.height); 1045 | this.renderTexture2 = PIXI.RenderTexture.create(this.app.renderer.width, this.app.renderer.height); 1046 | this.currentTexture = this.renderTexture; 1047 | 1048 | this.outputSprite = new PIXI.Sprite(this.currentTexture); 1049 | this.outputSprite.x = 400; 1050 | this.outputSprite.y = 300; 1051 | this.outputSprite.anchor.set(0.5); 1052 | this.app.stage.addChild(this.outputSprite); 1053 | 1054 | this.stuffContainer = new PIXI.Container(); 1055 | this.stuffContainer.x = 400; 1056 | this.stuffContainer.y = 300; 1057 | this.app.stage.addChild(this.stuffContainer); 1058 | 1059 | const fruits = [ 1060 | "required/assets/spinObj_01.png", 1061 | "required/assets/spinObj_02.png", 1062 | "required/assets/spinObj_03.png", 1063 | "required/assets/spinObj_04.png", 1064 | "required/assets/spinObj_05.png", 1065 | "required/assets/spinObj_06.png", 1066 | "required/assets/spinObj_07.png", 1067 | "required/assets/spinObj_08.png" 1068 | ]; 1069 | 1070 | this.items = []; 1071 | 1072 | for (let i = 0; i < 20; i++) { 1073 | const item = PIXI.Sprite.fromImage(fruits[i % fruits.length]); 1074 | item.x = Math.random() * 400 - 200; 1075 | item.y = Math.random() * 400 - 200; 1076 | item.anchor.set(0.5); 1077 | this.stuffContainer.addChild(item); 1078 | this.items.push(item); 1079 | } 1080 | 1081 | this.count = 0; 1082 | 1083 | this.app.ticker.add((): void => { 1084 | for (const item of this.items) { 1085 | item.rotation += 0.1; 1086 | } 1087 | 1088 | this.count += 0.01; 1089 | 1090 | const temp = this.renderTexture; 1091 | this.renderTexture = this.renderTexture2; 1092 | this.renderTexture2 = temp; 1093 | 1094 | this.outputSprite.texture = this.renderTexture; 1095 | 1096 | this.stuffContainer.rotation -= 0.01; 1097 | this.outputSprite.scale.set(1 + Math.sin(this.count) * 0.2); 1098 | 1099 | this.app.renderer.render(this.app.stage, this.renderTexture2, false); 1100 | }); 1101 | } 1102 | } 1103 | 1104 | class StripDemo { 1105 | private app: PIXI.Application; 1106 | private count: number; 1107 | private points: PIXI.Point[]; 1108 | private strip: PIXI.mesh.Rope; 1109 | private snakeContainer: PIXI.Container; 1110 | 1111 | constructor() { 1112 | this.app = new PIXI.Application(); 1113 | document.body.appendChild(this.app.view); 1114 | 1115 | this.count = 0; 1116 | 1117 | const ropeLength = 918 / 20; 1118 | 1119 | this.points = []; 1120 | 1121 | for (let i = 0; i < 20; i++) { 1122 | this.points.push(new PIXI.Point(i * ropeLength, 0)); 1123 | } 1124 | 1125 | this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage("required/assets/snake.png"), this.points); 1126 | this.strip.x = -459; 1127 | 1128 | this.snakeContainer = new PIXI.Container(); 1129 | this.snakeContainer.position.x = 400; 1130 | this.snakeContainer.position.y = 300; 1131 | this.snakeContainer.scale.set(800 / 1100); 1132 | this.snakeContainer.addChild(this.strip); 1133 | this.app.stage.addChild(this.snakeContainer); 1134 | 1135 | this.app.ticker.add((): void => { 1136 | this.count += 0.1; 1137 | for (let i = 0; i < this.points.length; i++) { 1138 | this.points[i].y = Math.sin(i * 0.5 + this.count) * 30; 1139 | this.points[i].x = i * ropeLength + Math.cos(i * 0.3 + this.count) * 20; 1140 | } 1141 | }); 1142 | } 1143 | } 1144 | 1145 | class TextDemo { 1146 | private app: PIXI.Application; 1147 | private bitmapFontText: PIXI.extras.BitmapText; 1148 | private background: PIXI.Sprite; 1149 | private textSample: PIXI.Text; 1150 | private spinningText: PIXI.Text; 1151 | private countingText: PIXI.Text; 1152 | private count: number; 1153 | 1154 | constructor() { 1155 | this.app = new PIXI.Application(); 1156 | document.body.appendChild(this.app.view); 1157 | 1158 | PIXI.loader.add("desyrel", "required/assets/desyrel.xml").load((): void => { 1159 | this.bitmapFontText = new PIXI.extras.BitmapText("bitmap fonts are\n now supported!", { 1160 | font: "35px Desyrel", 1161 | align: "right" 1162 | }); 1163 | this.bitmapFontText.x = this.app.renderer.width - this.bitmapFontText.textWidth - 20; 1164 | this.bitmapFontText.y = 20; 1165 | this.app.stage.addChild(this.bitmapFontText); 1166 | }); 1167 | 1168 | this.background = PIXI.Sprite.fromImage("required/assets/textDemoBG.jpg"); 1169 | this.background.width = this.app.renderer.width; 1170 | this.background.height = this.app.renderer.height; 1171 | this.app.stage.addChild(this.background); 1172 | 1173 | this.textSample = new PIXI.Text("Pixi.js can has\n multiline text!", { 1174 | fontFamily: "Snippet", 1175 | fontSize: 35, 1176 | fill: "white", 1177 | align: "left" 1178 | }); 1179 | this.textSample.position.set(20); 1180 | 1181 | this.spinningText = new PIXI.Text('I"m fun!', { 1182 | fontWeight: "bold", 1183 | fontSize: 60, 1184 | fontFamily: "Arial", 1185 | fill: "#cc00ff", 1186 | align: "center", 1187 | stroke: "#FFFFFF", 1188 | strokeThickness: 6 1189 | }); 1190 | this.spinningText.anchor.set(0.5); 1191 | this.spinningText.x = this.app.renderer.width / 2; 1192 | this.spinningText.y = this.app.renderer.height / 2; 1193 | 1194 | this.countingText = new PIXI.Text("COUNT 4Elet: 0", { 1195 | fontWeight: "bold", 1196 | fontStyle: "italic", 1197 | fontSize: 60, 1198 | fontFamily: "Arvo", 1199 | fill: "#3e1707", 1200 | align: "center", 1201 | stroke: "#a4410e", 1202 | strokeThickness: 7 1203 | }); 1204 | 1205 | this.countingText.x = this.app.renderer.width / 2; 1206 | this.countingText.y = 500; 1207 | this.countingText.anchor.x = 0.5; 1208 | 1209 | this.app.stage.addChild(this.textSample, this.spinningText, this.countingText); 1210 | 1211 | this.count = 0; 1212 | 1213 | this.app.ticker.add((): void => { 1214 | this.count += 0.05; 1215 | this.countingText.text = "COUNT 4Elet: " + Math.floor(this.count); 1216 | 1217 | this.spinningText.rotation += 0.03; 1218 | }); 1219 | } 1220 | } 1221 | 1222 | class TextureRotate { 1223 | private app: PIXI.Application; 1224 | private bol: boolean; 1225 | private texture: PIXI.Texture; 1226 | private secondTexture: PIXI.Texture; 1227 | private dude: PIXI.Sprite; 1228 | 1229 | constructor() { 1230 | this.app = new PIXI.Application(); 1231 | document.body.appendChild(this.app.view); 1232 | 1233 | this.bol = false; 1234 | 1235 | PIXI.loader.add("flowerTop", "required/assets/flowerTop.png"); 1236 | PIXI.loader.load((loader: PIXI.loaders.Loader, resources: any) => { 1237 | this.texture = resources.flowerTop.texture; 1238 | this.init(); 1239 | }); 1240 | } 1241 | 1242 | private init(): void { 1243 | const textures = [this.texture]; 1244 | const D8 = PIXI.GroupD8; 1245 | for (let rotate = 1; rotate < 16; rotate++) { 1246 | const h = D8.isVertical(rotate) ? this.texture.frame.width : this.texture.frame.height; 1247 | const w = D8.isVertical(rotate) ? this.texture.frame.height : this.texture.frame.width; 1248 | 1249 | const frame = this.texture.frame; 1250 | const crop = new PIXI.Rectangle(this.texture.frame.x, this.texture.frame.y, w, h); 1251 | const trim = crop; 1252 | let rotatedTexture: PIXI.Texture; 1253 | if (rotate % 2 === 0) { 1254 | rotatedTexture = new PIXI.Texture(this.texture.baseTexture, frame, crop, trim, rotate); 1255 | } else { 1256 | rotatedTexture = new PIXI.Texture(this.texture.baseTexture, frame, crop, trim, rotate - 1); 1257 | rotatedTexture.rotate++; 1258 | } 1259 | textures.push(rotatedTexture); 1260 | } 1261 | 1262 | const offsetX = (this.app.renderer.width / 16) | 0; 1263 | const offsetY = (this.app.renderer.height / 8) | 0; 1264 | const gridW = (this.app.renderer.width / 4) | 0; 1265 | const gridH = (this.app.renderer.height / 5) | 0; 1266 | 1267 | for (let i = 0; i < 16; i++) { 1268 | const dude = new PIXI.Sprite(textures[i < 8 ? i * 2 : (i - 8) * 2 + 1]); 1269 | dude.scale.x = 0.5; 1270 | dude.scale.y = 0.5; 1271 | dude.x = offsetX + gridW * (i % 4); 1272 | dude.y = offsetY + gridH * ((i / 4) | 0); 1273 | this.app.stage.addChild(dude); 1274 | 1275 | const text = new PIXI.Text("rotate = " + dude.texture.rotate, { 1276 | fontFamily: "Courier New", 1277 | fontSize: "12px", 1278 | fill: "white", 1279 | align: "left" 1280 | }); 1281 | text.x = dude.x; 1282 | text.y = dude.y - 20; 1283 | this.app.stage.addChild(text); 1284 | } 1285 | } 1286 | } 1287 | 1288 | class TextureSwap { 1289 | private app: PIXI.Application; 1290 | private bol: boolean; 1291 | private texture: PIXI.Texture; 1292 | private secondTexture: PIXI.Texture; 1293 | private dude: PIXI.Sprite; 1294 | 1295 | constructor() { 1296 | this.app = new PIXI.Application(); 1297 | document.body.appendChild(this.app.view); 1298 | 1299 | this.bol = false; 1300 | 1301 | this.texture = PIXI.Texture.fromImage("required/assets/flowerTop.png"); 1302 | 1303 | this.secondTexture = PIXI.Texture.fromImage("required/assets/eggHead.png"); 1304 | 1305 | this.dude = new PIXI.Sprite(this.texture); 1306 | this.dude.anchor.set(0.5); 1307 | this.dude.x = this.app.renderer.width / 2; 1308 | this.dude.y = this.app.renderer.height / 2; 1309 | this.dude.interactive = true; 1310 | this.dude.buttonMode = true; 1311 | this.app.stage.addChild(this.dude); 1312 | 1313 | this.dude.on("pointertap", (): void => { 1314 | this.bol = !this.bol; 1315 | if (this.bol) { 1316 | this.dude.texture = this.secondTexture; 1317 | } else { 1318 | this.dude.texture = this.texture; 1319 | } 1320 | }); 1321 | 1322 | this.app.ticker.add((): void => { 1323 | this.dude.rotation += 0.1; 1324 | }); 1325 | } 1326 | } 1327 | 1328 | class Tinting { 1329 | private app: PIXI.Application; 1330 | private aliens: Dude[]; 1331 | 1332 | constructor() { 1333 | this.app = new PIXI.Application(); 1334 | document.body.appendChild(this.app.view); 1335 | 1336 | this.aliens = []; 1337 | 1338 | const totalDudes = 20; 1339 | 1340 | const dudeTexture = PIXI.Texture.fromImage("required/assets/eggHead.png"); 1341 | 1342 | for (let i = 0; i < totalDudes; i++) { 1343 | const dude = new Dude(dudeTexture); 1344 | dude.anchor.set(0.5); 1345 | dude.scale.set(0.8 + Math.random() * 0.3); 1346 | dude.x = Math.random() * this.app.renderer.width; 1347 | dude.y = Math.random() * this.app.renderer.height; 1348 | dude.tint = Math.random() * 0xffffff; 1349 | dude.direction = Math.random() * Math.PI * 2; 1350 | dude.turningSpeed = Math.random() - 0.8; 1351 | dude.speed = 2 + Math.random() * 2; 1352 | 1353 | this.aliens.push(dude); 1354 | this.app.stage.addChild(dude); 1355 | } 1356 | 1357 | const dudeBoundsPadding = 100; 1358 | const dudeBounds = new PIXI.Rectangle( 1359 | -dudeBoundsPadding, 1360 | -dudeBoundsPadding, 1361 | this.app.renderer.width + dudeBoundsPadding * 2, 1362 | this.app.renderer.height + dudeBoundsPadding * 2 1363 | ); 1364 | 1365 | this.app.ticker.add((): void => { 1366 | for (const dude of this.aliens) { 1367 | dude.direction += dude.turningSpeed * 0.01; 1368 | dude.x += Math.sin(dude.direction) * dude.speed; 1369 | dude.y += Math.cos(dude.direction) * dude.speed; 1370 | dude.rotation = -dude.direction - Math.PI / 2; 1371 | 1372 | if (dude.x < dudeBounds.x) { 1373 | dude.x += dudeBounds.width; 1374 | } else if (dude.x > dudeBounds.x + dudeBounds.width) { 1375 | dude.x -= dudeBounds.width; 1376 | } 1377 | 1378 | if (dude.y < dudeBounds.y) { 1379 | dude.y += dudeBounds.height; 1380 | } else if (dude.y > dudeBounds.y + dudeBounds.height) { 1381 | dude.y -= dudeBounds.height; 1382 | } 1383 | } 1384 | }); 1385 | } 1386 | } 1387 | 1388 | class TransparentBackground { 1389 | private app: PIXI.Application; 1390 | private bunny: PIXI.Sprite; 1391 | 1392 | constructor() { 1393 | this.app = new PIXI.Application(800, 600, { transparent: true }); 1394 | document.body.appendChild(this.app.view); 1395 | 1396 | this.bunny = PIXI.Sprite.fromImage("required/assets/bunny.png"); 1397 | 1398 | this.bunny.anchor.set(0.5); 1399 | 1400 | this.bunny.x = this.app.renderer.width / 2; 1401 | this.bunny.y = this.app.renderer.height / 2; 1402 | 1403 | this.app.stage.addChild(this.bunny); 1404 | 1405 | this.app.ticker.add((): void => { 1406 | this.bunny.rotation += 0.1; 1407 | }); 1408 | } 1409 | } 1410 | } 1411 | 1412 | function filters() { 1413 | class BlurFilter { 1414 | private app: PIXI.Application; 1415 | private bg: PIXI.Sprite; 1416 | private littleDudes: PIXI.Sprite; 1417 | private littleRobot: PIXI.Sprite; 1418 | private blurFilter1: PIXI.filters.BlurFilter; 1419 | private blurFilter2: PIXI.filters.BlurFilter; 1420 | private count: number; 1421 | 1422 | constructor() { 1423 | this.app = new PIXI.Application(800, 600); 1424 | document.body.appendChild(this.app.view); 1425 | 1426 | this.bg = PIXI.Sprite.fromImage("required/assets/depth_blur_BG.jpg"); 1427 | this.bg.width = this.app.renderer.width; 1428 | this.bg.height = this.app.renderer.height; 1429 | this.app.stage.addChild(this.bg); 1430 | 1431 | this.littleDudes = PIXI.Sprite.fromImage("required/assets/depth_blur_dudes.jpg"); 1432 | this.littleDudes.x = this.app.renderer.width / 2 - 315; 1433 | this.littleDudes.y = 200; 1434 | this.app.stage.addChild(this.littleDudes); 1435 | 1436 | this.littleRobot = PIXI.Sprite.fromImage("required/assets/depth_blur_moby.jpg"); 1437 | this.littleRobot.x = this.app.renderer.width / 2 - 200; 1438 | this.littleRobot.y = 100; 1439 | this.app.stage.addChild(this.littleRobot); 1440 | 1441 | this.blurFilter1 = new PIXI.filters.BlurFilter(); 1442 | this.blurFilter2 = new PIXI.filters.BlurFilter(); 1443 | 1444 | this.littleDudes.filters = [this.blurFilter1]; 1445 | this.littleRobot.filters = [this.blurFilter2]; 1446 | 1447 | this.count = 0; 1448 | 1449 | this.app.ticker.add((): void => { 1450 | this.count += 0.005; 1451 | 1452 | const blurAmount = Math.cos(this.count); 1453 | const blurAmount2 = Math.sin(this.count); 1454 | 1455 | this.blurFilter1.blur = 20 * blurAmount; 1456 | this.blurFilter2.blur = 20 * blurAmount2; 1457 | }); 1458 | } 1459 | } 1460 | 1461 | class DisplacementMap { 1462 | private app: PIXI.Application; 1463 | private container: PIXI.Container; 1464 | private maggots: DisplacementMapDude[]; 1465 | private displacementSprite: PIXI.Sprite; 1466 | private displacementFilter: PIXI.filters.DisplacementFilter; 1467 | private ring: PIXI.Sprite; 1468 | private bg: PIXI.Sprite; 1469 | private count: number; 1470 | 1471 | constructor() { 1472 | this.app = new PIXI.Application(800, 600); 1473 | this.app.stage.interactive = true; 1474 | document.body.appendChild(this.app.view); 1475 | 1476 | this.container = new PIXI.Container(); 1477 | this.app.stage.addChild(this.container); 1478 | 1479 | const padding = 100; 1480 | const bounds = new PIXI.Rectangle( 1481 | -padding, 1482 | -padding, 1483 | this.app.renderer.width + padding * 2, 1484 | this.app.renderer.height + padding * 2 1485 | ); 1486 | this.maggots = []; 1487 | 1488 | for (let i = 0; i < 20; i++) { 1489 | const maggot = new DisplacementMapDude(); 1490 | maggot.anchor.set(0.5); 1491 | this.container.addChild(maggot); 1492 | 1493 | maggot.direction = Math.random() * Math.PI * 2; 1494 | maggot.speed = 1; 1495 | maggot.turnSpeed = Math.random() - 0.8; 1496 | 1497 | maggot.position.x = Math.random() * bounds.width; 1498 | maggot.position.y = Math.random() * bounds.height; 1499 | 1500 | maggot.scale.set(1 + Math.random() * 0.3); 1501 | //tslint:disable-next-line:whitespace 1502 | maggot.original = (maggot.scale as PIXI.Point).clone(); 1503 | this.maggots.push(maggot); 1504 | } 1505 | 1506 | this.displacementSprite = PIXI.Sprite.fromImage("required/assets/displace.png"); 1507 | const displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite); 1508 | this.app.stage.addChild(this.displacementSprite); 1509 | 1510 | this.container.filters = [displacementFilter]; 1511 | 1512 | displacementFilter.scale.x = 110; 1513 | displacementFilter.scale.y = 110; 1514 | 1515 | this.ring = PIXI.Sprite.fromImage("required/assets/ring.png"); 1516 | this.ring.anchor.set(0.5); 1517 | this.ring.visible = false; 1518 | this.app.stage.addChild(this.ring); 1519 | 1520 | this.bg = PIXI.Sprite.fromImage("required/assets/bkg-grass.jpg"); 1521 | this.bg.width = this.app.renderer.width; 1522 | this.bg.height = this.app.renderer.height; 1523 | this.bg.alpha = 0.4; 1524 | this.container.addChild(this.bg); 1525 | 1526 | this.count = 0; 1527 | 1528 | this.app.stage.on("mousemove", this.onPointerMove).on("touchmove", this.onPointerMove); 1529 | 1530 | this.app.ticker.add((): void => { 1531 | this.count += 0.05; 1532 | 1533 | for (const maggot of this.maggots) { 1534 | maggot.direction += maggot.turnSpeed * 0.01; 1535 | maggot.x += Math.sin(maggot.direction) * maggot.speed; 1536 | maggot.y += Math.cos(maggot.direction) * maggot.speed; 1537 | 1538 | maggot.rotation = -maggot.direction - Math.PI / 2; 1539 | maggot.scale.x = maggot.original.x + Math.sin(this.count) * 0.2; 1540 | 1541 | if (maggot.x < bounds.x) { 1542 | maggot.x += bounds.width; 1543 | } else if (maggot.x > bounds.x + bounds.width) { 1544 | maggot.x -= bounds.width; 1545 | } 1546 | 1547 | if (maggot.y < bounds.y) { 1548 | maggot.y += bounds.height; 1549 | } else if (maggot.y > bounds.y + bounds.height) { 1550 | maggot.y -= bounds.height; 1551 | } 1552 | } 1553 | }); 1554 | } 1555 | 1556 | private onPointerMove = (eventData: PIXI.interaction.InteractionEvent): void => { 1557 | this.ring.visible = true; 1558 | this.displacementSprite.x = eventData.data.global.x - 100; 1559 | this.displacementSprite.y = eventData.data.global.y - this.displacementSprite.height / 2; 1560 | this.ring.x = eventData.data.global.x - 25; 1561 | this.ring.y = eventData.data.global.y; 1562 | }; 1563 | } 1564 | class DisplacementMapDude extends PIXI.Sprite { 1565 | direction: number = 0; 1566 | speed: number = 0; 1567 | turnSpeed: number = 0; 1568 | original: PIXI.Point = new PIXI.Point(); 1569 | 1570 | constructor() { 1571 | super(PIXI.Texture.fromImage("../../_assets/maggot.png")); 1572 | } 1573 | } 1574 | 1575 | class Filter { 1576 | private app: PIXI.Application; 1577 | private bg: PIXI.Sprite; 1578 | private filter: PIXI.filters.ColorMatrixFilter; 1579 | private container: PIXI.Container; 1580 | private bgFront: PIXI.Sprite; 1581 | private light2: PIXI.Sprite; 1582 | private light1: PIXI.Sprite; 1583 | private panda: PIXI.Sprite; 1584 | private count: number; 1585 | private enabled: boolean; 1586 | private help: PIXI.Text; 1587 | 1588 | constructor() { 1589 | this.app = new PIXI.Application(); 1590 | this.app.stage.interactive = true; 1591 | document.body.appendChild(this.app.view); 1592 | 1593 | this.bg = PIXI.Sprite.fromImage("required/assets/BGrotate.jpg"); 1594 | this.bg.anchor.set(0.5); 1595 | this.bg.x = this.app.renderer.width / 2; 1596 | this.bg.y = this.app.renderer.height / 2; 1597 | 1598 | this.filter = new PIXI.filters.ColorMatrixFilter(); 1599 | 1600 | this.container = new PIXI.Container(); 1601 | this.container.position.x = this.app.renderer.width / 2; 1602 | this.container.position.y = this.app.renderer.height / 2; 1603 | this.app.stage.addChild(this.container); 1604 | 1605 | this.bgFront = PIXI.Sprite.fromImage("required/assets/SceneRotate.jpg"); 1606 | this.bgFront.anchor.set(0.5); 1607 | this.container.addChild(this.bgFront); 1608 | 1609 | this.light2 = PIXI.Sprite.fromImage("required/assets/LightRotate2.png"); 1610 | this.light2.anchor.set(0.5); 1611 | this.container.addChild(this.light2); 1612 | 1613 | this.light1 = PIXI.Sprite.fromImage("../../_assets/LightRotate1.png"); 1614 | this.light1.anchor.set(0.5); 1615 | this.container.addChild(this.light1); 1616 | 1617 | this.panda = PIXI.Sprite.fromImage("required/assets/panda.png"); 1618 | this.panda.anchor.set(0.5); 1619 | this.container.addChild(this.panda); 1620 | 1621 | this.app.stage.filters = [this.filter]; 1622 | 1623 | this.count = 0; 1624 | this.enabled = true; 1625 | 1626 | this.app.stage.on("pointertap", (): void => { 1627 | this.enabled = !this.enabled; 1628 | this.app.stage.filters = this.enabled ? [this.filter] : null; 1629 | }); 1630 | 1631 | this.help = new PIXI.Text("Click or tap to turn filters on / off.", { 1632 | fontFamily: "Arial", 1633 | fontSize: 12, 1634 | fontWeight: "bold", 1635 | fill: "white" 1636 | }); 1637 | this.help.y = this.app.renderer.height - 25; 1638 | this.help.x = 10; 1639 | this.app.stage.addChild(this.help); 1640 | 1641 | this.app.ticker.add((delta: number): void => { 1642 | this.bg.rotation += 0.01; 1643 | this.bgFront.rotation -= 0.01; 1644 | this.light1.rotation += 0.02; 1645 | this.light2.rotation += 0.01; 1646 | 1647 | this.panda.scale.x = 1 + Math.sin(this.count) * 0.04; 1648 | this.panda.scale.y = 1 + Math.cos(this.count) * 0.04; 1649 | 1650 | this.count += 0.1; 1651 | 1652 | const matrix = this.filter.matrix; 1653 | 1654 | matrix[1] = Math.sin(this.count) * 3; 1655 | matrix[2] = Math.cos(this.count); 1656 | matrix[3] = Math.cos(this.count) * 1.5; 1657 | matrix[4] = Math.sin(this.count / 3) * 2; 1658 | matrix[5] = Math.sin(this.count / 2); 1659 | matrix[6] = Math.sin(this.count / 4); 1660 | }); 1661 | } 1662 | } 1663 | } 1664 | -------------------------------------------------------------------------------- /temp/pixi.js-tests: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | namespace basics { 4 | export class Basics { 5 | private app: PIXI.Application; 6 | 7 | private bunny: PIXI.Sprite; 8 | 9 | constructor() { 10 | this.app = new PIXI.Application(800, 600, { 11 | backgroundColor: 0x1099bb 12 | }); 13 | document.body.appendChild(this.app.view); 14 | 15 | this.bunny = PIXI.Sprite.fromImage( 16 | "required/assets/basics/bunny.png" 17 | ); 18 | this.bunny.anchor.set(0.5); 19 | this.bunny.x = this.app.renderer.width / 2; 20 | this.bunny.y = this.app.renderer.height / 2; 21 | this.app.stage.addChild(this.bunny); 22 | 23 | this.app.ticker.add( 24 | (delta: number): void => { 25 | this.bunny.rotation += 0.1 / delta; 26 | } 27 | ); 28 | } 29 | } 30 | 31 | export class Click { 32 | private app: PIXI.Application; 33 | 34 | private sprite: PIXI.Sprite; 35 | 36 | constructor() { 37 | this.app = new PIXI.Application(800, 600, { 38 | backgroundColor: 0x1099bb 39 | }); 40 | document.body.appendChild(this.app.view); 41 | 42 | this.sprite = PIXI.Sprite.fromImage( 43 | "../../_assets/basics/bunny.png" 44 | ); 45 | this.sprite.texture.baseTexture.scaleMode = 46 | PIXI.SCALE_MODES.NEAREST; 47 | this.sprite.anchor.set(0.5); 48 | this.sprite.x = this.app.renderer.width / 2; 49 | this.sprite.y = this.app.renderer.height / 2; 50 | this.sprite.interactive = true; 51 | this.sprite.buttonMode = true; 52 | this.sprite.on( 53 | "pointerdown", 54 | (): void => { 55 | this.sprite.scale.x *= 1.25; 56 | this.sprite.scale.y *= 1.25; 57 | } 58 | ); 59 | this.app.stage.addChild(this.sprite); 60 | } 61 | } 62 | 63 | export class ContainerPivot { 64 | private app: PIXI.Application; 65 | private container: PIXI.Container; 66 | 67 | constructor() { 68 | this.app = new PIXI.Application(800, 600, { 69 | backgroundColor: 0x1099bb 70 | }); 71 | document.body.appendChild(this.app.view); 72 | 73 | this.container = new PIXI.Container(); 74 | this.app.stage.addChild(this.container); 75 | 76 | const texture = PIXI.Texture.fromImage( 77 | "../../_assets/basics/bunny.png" 78 | ); 79 | 80 | for (let i = 0; i < 25; i++) { 81 | const bunny = new PIXI.Sprite(texture); 82 | bunny.anchor.set(0.5); 83 | bunny.x = (i % 5) * 40; 84 | bunny.y = Math.floor(i / 5) * 40; 85 | this.container.addChild(bunny); 86 | } 87 | 88 | this.container.x = this.app.renderer.width / 2; 89 | this.container.y = this.app.renderer.height / 2; 90 | 91 | this.container.pivot.x = this.container.width / 2; 92 | this.container.pivot.y = this.container.height / 2; 93 | 94 | this.app.ticker.add( 95 | (delta: number): void => { 96 | this.container.rotation -= 0.01 / delta; 97 | } 98 | ); 99 | } 100 | } 101 | 102 | export class Container { 103 | private app: PIXI.Application; 104 | private container: PIXI.Container; 105 | 106 | constructor() { 107 | this.app = new PIXI.Application(800, 600, { 108 | backgroundColor: 0x1099bb 109 | }); 110 | document.body.appendChild(this.app.view); 111 | 112 | this.container = new PIXI.Container(); 113 | this.app.stage.addChild(this.container); 114 | 115 | const texture = PIXI.Texture.fromImage( 116 | "../../_assets/basics/bunny.png" 117 | ); 118 | 119 | for (let i = 0; i < 25; i++) { 120 | const bunny = new PIXI.Sprite(texture); 121 | bunny.anchor.set(0.5); 122 | bunny.x = (i % 5) * 40; 123 | bunny.y = Math.floor(i / 5) * 40; 124 | this.container.addChild(bunny); 125 | } 126 | 127 | this.container.x = this.app.renderer.width / 2; 128 | this.container.y = this.app.renderer.height / 2; 129 | } 130 | } 131 | 132 | export class CustomizedFilter extends PIXI.Filter { 133 | constructor(fragmentSource: string) { 134 | super(null, fragmentSource, { 135 | customUniform: { 136 | type: "1f", 137 | value: 0 138 | } 139 | }); 140 | } 141 | } 142 | export class CustomFilter { 143 | private app: PIXI.Application; 144 | private background: PIXI.Sprite; 145 | private filter: CustomizedFilter; 146 | 147 | constructor() { 148 | this.app = new PIXI.Application(800, 600, { 149 | backgroundColor: 0x1099bb 150 | }); 151 | document.body.appendChild(this.app.view); 152 | 153 | this.background = PIXI.Sprite.fromImage( 154 | "required/assets/bkg-grass.jpg" 155 | ); 156 | this.background.width = this.app.renderer.width; 157 | this.background.height = this.app.renderer.height; 158 | this.app.stage.addChild(this.background); 159 | 160 | this.app.stop(); 161 | 162 | PIXI.loader 163 | .add("shader", "_assets/basics/shader.frag") 164 | 165 | .load( 166 | (loader: PIXI.loaders.Loader, resource: any): void => { 167 | this.filter = new PIXI.Filter( 168 | null, 169 | resource.shader.data 170 | ); 171 | this.background.filters = [this.filter]; 172 | this.app.start(); 173 | 174 | this.app.ticker.add((delta: number) => { 175 | this.filter.uniforms.customUniform += 0.04 / delta; 176 | }); 177 | } 178 | ); 179 | } 180 | } 181 | 182 | export class Graphics { 183 | private app: PIXI.Application; 184 | private graphics: PIXI.Graphics; 185 | 186 | constructor() { 187 | this.app = new PIXI.Application(800, 600, { antialias: true }); 188 | document.body.appendChild(this.app.view); 189 | 190 | const graphics = new PIXI.Graphics(); 191 | 192 | // set a fill and line style 193 | graphics.beginFill(0xff3300); 194 | graphics.lineStyle(4, 0xffd900, 1); 195 | 196 | // draw a shape 197 | graphics.moveTo(50, 50); 198 | graphics.lineTo(250, 50); 199 | graphics.lineTo(100, 100); 200 | graphics.lineTo(50, 50); 201 | graphics.endFill(); 202 | 203 | // set a fill and a line style again and draw a rectangle 204 | graphics.lineStyle(2, 0x0000ff, 1); 205 | graphics.beginFill(0xff700b, 1); 206 | graphics.drawRect(50, 250, 120, 120); 207 | 208 | // draw a rounded rectangle 209 | graphics.lineStyle(2, 0xff00ff, 1); 210 | graphics.beginFill(0xff00bb, 0.25); 211 | graphics.drawRoundedRect(150, 450, 300, 100, 15); 212 | graphics.endFill(); 213 | 214 | // draw a circle, set the lineStyle to zero so the circle doesn"t have an outline 215 | graphics.lineStyle(0); 216 | graphics.beginFill(0xffff0b, 0.5); 217 | graphics.drawCircle(470, 90, 60); 218 | graphics.endFill(); 219 | 220 | this.graphics = graphics; 221 | 222 | this.app.stage.addChild(this.graphics); 223 | } 224 | } 225 | 226 | export class RenderTexture { 227 | private app: PIXI.Application; 228 | private container: PIXI.Container; 229 | private renderTexture: PIXI.RenderTexture; 230 | private sprite: PIXI.Sprite; 231 | 232 | constructor() { 233 | this.app = new PIXI.Application(800, 600, { 234 | backgroundColor: 0x1099bb 235 | }); 236 | document.body.appendChild(this.app.view); 237 | 238 | this.container = new PIXI.Container(); 239 | this.app.stage.addChild(this.container); 240 | 241 | const texture = PIXI.Texture.fromImage( 242 | "required/assets/basics/bunny.png" 243 | ); 244 | 245 | for (let i = 0; i < 25; i++) { 246 | const bunny = new PIXI.Sprite(texture); 247 | bunny.x = (i % 5) * 30; 248 | bunny.y = Math.floor(i / 5) * 30; 249 | bunny.rotation = Math.random() * (Math.PI * 2); 250 | this.container.addChild(bunny); 251 | } 252 | 253 | const brt = new PIXI.BaseRenderTexture( 254 | 300, 255 | 300, 256 | PIXI.SCALE_MODES.LINEAR, 257 | 1 258 | ); 259 | const rt = new PIXI.RenderTexture(brt); 260 | 261 | this.sprite = new PIXI.Sprite(rt); 262 | this.sprite.x = 450; 263 | this.sprite.y = 60; 264 | this.app.stage.addChild(this.sprite); 265 | 266 | this.container.x = 100; 267 | this.container.y = 60; 268 | 269 | this.app.ticker.add((delta: number) => { 270 | this.app.renderer.render(this.container, rt); 271 | }); 272 | } 273 | } 274 | 275 | export class SpriteSheet { 276 | private app: PIXI.Application; 277 | private anim: PIXI.extras.AnimatedSprite; 278 | 279 | constructor() { 280 | PIXI.loader 281 | .add("required/assets/basics/fighter.json") 282 | .load((loader: PIXI.loaders.Loader, resource: any) => { 283 | const frames = []; 284 | 285 | for (let i = 0; i < 30; i++) { 286 | const val = i < 10 ? "0" + i : i; 287 | 288 | frames.push( 289 | PIXI.Texture.fromFrame( 290 | "rollSequence00" + val + ".png" 291 | ) 292 | ); 293 | } 294 | 295 | this.anim = new PIXI.extras.AnimatedSprite(frames); 296 | 297 | this.anim.x = this.app.renderer.width / 2; 298 | this.anim.y = this.app.renderer.height / 2; 299 | this.anim.anchor.set(0.5); 300 | this.anim.animationSpeed = 0.5; 301 | this.anim.play(); 302 | 303 | this.app.stage.addChild(this.anim); 304 | 305 | this.app.ticker.add((deltaTime: number) => { 306 | this.anim.rotation += 0.01; 307 | }); 308 | }); 309 | } 310 | } 311 | 312 | export class Text { 313 | private app: PIXI.Application; 314 | private basicText: PIXI.Text; 315 | private richText: PIXI.Text; 316 | 317 | constructor() { 318 | this.app = new PIXI.Application(800, 600, { 319 | backgroundColor: 0x1099bb 320 | }); 321 | document.body.appendChild(this.app.view); 322 | 323 | this.basicText = new PIXI.Text("Basic text in pixi"); 324 | this.basicText.x = 30; 325 | this.basicText.y = 90; 326 | this.app.stage.addChild(this.basicText); 327 | 328 | const style = new PIXI.TextStyle({ 329 | fontFamily: "Arial", 330 | fontSize: 36, 331 | fontStyle: "italic", 332 | fontWeight: "bold", 333 | fill: ["#ffffff", "#fff0b5"], 334 | stroke: "#4a1850", 335 | strokeThickness: 5, 336 | dropShadow: true, 337 | dropShadowColor: "#000000", 338 | dropShadowBlur: 4, 339 | dropShadowAngle: Math.PI / 6, 340 | dropShadowDistance: 6, 341 | wordWrap: true, 342 | wordWrapWidth: 440 343 | }); 344 | 345 | this.richText = new PIXI.Text( 346 | "Rich text with a lot of options and across multiple lines", 347 | style 348 | ); 349 | this.richText.x = 30; 350 | this.richText.y = 180; 351 | this.app.stage.addChild(this.richText); 352 | } 353 | } 354 | 355 | export class TexturedMesh { 356 | private app: PIXI.Application; 357 | private count: number; 358 | private points: PIXI.Point[]; 359 | private strip: PIXI.mesh.Rope; 360 | private graphics: PIXI.Graphics; 361 | 362 | constructor() { 363 | const ropeLength = 918 / 20; 364 | 365 | for (let i = 0; i < 25; i++) { 366 | this.points.push(new PIXI.Point(i * ropeLength, 0)); 367 | } 368 | 369 | this.strip = new PIXI.mesh.Rope( 370 | PIXI.Texture.fromImage("required/assets/snake.png"), 371 | this.points 372 | ); 373 | this.strip.x = -40; 374 | this.strip.y = 300; 375 | this.app.stage.addChild(this.strip); 376 | 377 | this.graphics = new PIXI.Graphics(); 378 | this.graphics.x = this.strip.x; 379 | this.graphics.y = this.strip.y; 380 | this.app.stage.addChild(this.graphics); 381 | 382 | // start animating 383 | this.app.ticker.add((deltaTime: number) => { 384 | this.count += 0.1; 385 | 386 | // make the snake 387 | for (let i = 0; i < this.points.length; i++) { 388 | this.points[i].y = Math.sin(i * 0.5 + this.count) * 30; 389 | this.points[i].x = 390 | i * ropeLength + Math.cos(i * 0.3 + this.count) * 20; 391 | } 392 | this.renderPoints(); 393 | }); 394 | } 395 | 396 | private renderPoints(): void { 397 | this.graphics.clear(); 398 | this.graphics.lineStyle(2, 0xffc2c2); 399 | this.graphics.moveTo(this.points[0].x, this.points[0].y); 400 | 401 | for (let i = 1; i < this.points.length; i++) { 402 | this.graphics.lineTo(this.points[i].x, this.points[i].y); 403 | } 404 | 405 | for (let i = 1; i < this.points.length; i++) { 406 | this.graphics.beginFill(0xff0022); 407 | this.graphics.drawCircle( 408 | this.points[i].x, 409 | this.points[i].y, 410 | 10 411 | ); 412 | this.graphics.endFill(); 413 | } 414 | } 415 | } 416 | 417 | export class TilingSprite { 418 | private app: PIXI.Application; 419 | private tilingSprite: PIXI.extras.TilingSprite; 420 | private count: number; 421 | 422 | constructor() { 423 | this.app = new PIXI.Application(); 424 | document.body.appendChild(this.app.view); 425 | 426 | const texture = PIXI.Texture.fromImage("required/assets/p2.jpeg"); 427 | 428 | this.tilingSprite = new PIXI.extras.TilingSprite( 429 | texture, 430 | this.app.renderer.width, 431 | this.app.renderer.height 432 | ); 433 | this.app.stage.addChild(this.tilingSprite); 434 | 435 | this.count = 0; 436 | 437 | this.app.ticker.add( 438 | (deltaTime: number): void => { 439 | this.count += 0.005; 440 | 441 | this.tilingSprite.tileScale.x = 2 + Math.sin(this.count); 442 | this.tilingSprite.tileScale.y = 2 + Math.cos(this.count); 443 | this.tilingSprite.tilePosition.x += 1; 444 | this.tilingSprite.tilePosition.y += 1; 445 | } 446 | ); 447 | } 448 | } 449 | 450 | export class Video { 451 | private app: PIXI.Application; 452 | private button: PIXI.Graphics; 453 | private videoSprite: PIXI.Sprite; 454 | 455 | constructor() { 456 | this.app = new PIXI.Application(800, 600, { transparent: true }); 457 | document.body.appendChild(this.app.view); 458 | 459 | this.button = new PIXI.Graphics() 460 | .beginFill(0x0, 0.5) 461 | .drawRoundedRect(0, 0, 100, 100, 10) 462 | .endFill() 463 | .beginFill(0xffffff) 464 | .moveTo(36, 30) 465 | .lineTo(36, 70) 466 | .lineTo(70, 50); 467 | 468 | // Position the button 469 | this.button.x = (this.app.renderer.width - this.button.width) / 2; 470 | this.button.y = (this.app.renderer.height - this.button.height) / 2; 471 | 472 | // Enable interactivity on the button 473 | this.button.interactive = true; 474 | this.button.buttonMode = true; 475 | 476 | // Add to the stage 477 | this.app.stage.addChild(this.button); 478 | 479 | this.button.on( 480 | "pointertap", 481 | (): void => { 482 | this.button.destroy(); 483 | 484 | const texture = PIXI.Texture.fromVideo( 485 | "required/assets/testVideo.mp4" 486 | ); 487 | 488 | this.videoSprite = new PIXI.Sprite(texture); 489 | this.videoSprite.width = this.app.renderer.width; 490 | this.videoSprite.height = this.app.renderer.height; 491 | this.app.stage.addChild(this.videoSprite); 492 | } 493 | ); 494 | } 495 | } 496 | } 497 | 498 | namespace demos { 499 | export class AlphaMask { 500 | private app: PIXI.Application; 501 | private bg: PIXI.Container; 502 | private cells: PIXI.Sprite; 503 | private mask: PIXI.Sprite; 504 | private target: PIXI.Point; 505 | 506 | constructor() { 507 | this.app = new PIXI.Application(); 508 | this.app.stage.interactive = true; 509 | document.body.appendChild(this.app.view); 510 | 511 | this.bg = PIXI.Sprite.fromImage("required/assets/bkg.jpg"); 512 | this.app.stage.addChild(this.bg); 513 | 514 | this.cells = PIXI.Sprite.fromImage("required/assets/cells.png"); 515 | this.cells.scale.set(1.5); 516 | 517 | this.mask = PIXI.Sprite.fromImage("required/assets/flowerTop.png"); 518 | this.mask.anchor.set(0.5); 519 | this.mask.x = 310; 520 | this.mask.y = 190; 521 | 522 | this.cells.mask = this.mask; 523 | 524 | this.app.stage.addChild(this.mask, this.cells); 525 | 526 | this.target = new PIXI.Point(); 527 | 528 | this.reset(); 529 | 530 | this.app.ticker.add( 531 | (deltaTime: number): void => { 532 | this.mask.position.x += (this.target.x - this.mask.x) * 0.1; 533 | this.mask.position.y += (this.target.y - this.mask.y) * 0.1; 534 | 535 | if (Math.abs(this.mask.x - this.target.x) < 1) { 536 | this.reset(); 537 | } 538 | } 539 | ); 540 | } 541 | 542 | private reset(): void { 543 | this.target.x = Math.floor(Math.random() * 550); 544 | this.target.y = Math.floor(Math.random() * 300); 545 | } 546 | } 547 | 548 | export class AnimatedSpriteDemo { 549 | private app: PIXI.Application; 550 | 551 | constructor() { 552 | this.app = new PIXI.Application(); 553 | this.app.stop(); 554 | document.body.appendChild(this.app.view); 555 | 556 | PIXI.loader.add("spritesheet", "required/assets/mc.json").load( 557 | (): void => { 558 | const explosionTextures: PIXI.Texture[] = []; 559 | let i: number; 560 | 561 | for (i = 0; i < 26; i++) { 562 | const texture = PIXI.Texture.fromFrame( 563 | "Explosion_Sequence_A " + (i + 1) + ".png" 564 | ); 565 | explosionTextures.push(texture); 566 | } 567 | 568 | for (i = 0; i < 50; i++) { 569 | const explosion = new PIXI.extras.AnimatedSprite( 570 | explosionTextures 571 | ); 572 | 573 | explosion.x = Math.random() * this.app.renderer.width; 574 | explosion.y = Math.random() * this.app.renderer.height; 575 | explosion.anchor.set(0.5); 576 | explosion.rotation = Math.random() * Math.PI; 577 | explosion.scale.set(0.75 + Math.random() * 0.5); 578 | explosion.gotoAndPlay(Math.random() * 27); 579 | this.app.stage.addChild(explosion); 580 | } 581 | 582 | this.app.start(); 583 | } 584 | ); 585 | } 586 | } 587 | 588 | export class Batch { 589 | private app: PIXI.Application; 590 | private sprites: PIXI.particles.ParticleContainer; 591 | private maggots: Dude[]; 592 | private dudeBounds: PIXI.Rectangle; 593 | private tick: number; 594 | 595 | constructor() { 596 | this.app = new PIXI.Application(); 597 | document.body.appendChild(this.app.view); 598 | 599 | this.sprites = new PIXI.particles.ParticleContainer(10000, { 600 | scale: true, 601 | position: true, 602 | rotation: true, 603 | uvs: true, 604 | tint: true 605 | }); 606 | this.app.stage.addChild(this.sprites); 607 | 608 | this.maggots = []; 609 | 610 | const totalSprites = 611 | this.app.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; 612 | 613 | const dudeTexture = PIXI.Texture.fromImage( 614 | "required/assets/tinyMaggot.png" 615 | ); 616 | 617 | for (let i = 0; i < totalSprites; i++) { 618 | const dude = new Dude(dudeTexture); 619 | dude.tint = Math.random() * 0xe8d4cd; 620 | dude.anchor.set(0.5); 621 | dude.scale.set(0.8 + Math.random() * 0.3); 622 | dude.x = Math.random() * this.app.renderer.width; 623 | dude.y = Math.random() * this.app.renderer.height; 624 | dude.direction = Math.random() * Math.PI * 2; 625 | dude.turningSpeed = Math.random() - 0.8; 626 | dude.speed = (2 + Math.random() * 2) * 0.2; 627 | dude.offset = Math.random() * 100; 628 | 629 | this.maggots.push(dude); 630 | this.sprites.addChild(dude); 631 | } 632 | 633 | const dudeBoundsPadding = 100; 634 | this.dudeBounds = new PIXI.Rectangle( 635 | -dudeBoundsPadding, 636 | -dudeBoundsPadding, 637 | this.app.renderer.width + dudeBoundsPadding * 2, 638 | this.app.renderer.height + dudeBoundsPadding * 2 639 | ); 640 | 641 | this.tick = 0; 642 | 643 | this.app.ticker.add( 644 | (): void => { 645 | for (let i = 0; i < this.maggots.length; i++) { 646 | const dude = this.maggots[i]; 647 | dude.scale.y = 648 | 0.95 + Math.sin(this.tick + dude.offset) * 0.05; 649 | dude.direction += dude.turningSpeed * 0.01; 650 | dude.x += 651 | Math.sin(dude.direction) * 652 | (dude.speed * dude.scale.y); 653 | dude.y += 654 | Math.cos(dude.direction) * 655 | (dude.speed * dude.scale.y); 656 | dude.rotation = -dude.direction + Math.PI; 657 | 658 | // wrap the maggots 659 | if (dude.x < this.dudeBounds.x) { 660 | dude.x += this.dudeBounds.width; 661 | } else if ( 662 | dude.x > 663 | this.dudeBounds.x + this.dudeBounds.width 664 | ) { 665 | dude.x -= this.dudeBounds.width; 666 | } 667 | 668 | if (dude.y < this.dudeBounds.y) { 669 | dude.y += this.dudeBounds.height; 670 | } else if ( 671 | dude.y > 672 | this.dudeBounds.y + this.dudeBounds.height 673 | ) { 674 | dude.y -= this.dudeBounds.height; 675 | } 676 | } 677 | 678 | this.tick += 0.1; 679 | } 680 | ); 681 | } 682 | } 683 | export class Dude extends PIXI.Sprite { 684 | direction: number = 0; 685 | speed: number = 0; 686 | turningSpeed: number = 0; 687 | offset: number = 0; 688 | 689 | constructor(texture: PIXI.Texture) { 690 | super(texture); 691 | } 692 | } 693 | 694 | export class BlendModes { 695 | private app: PIXI.Application; 696 | private background: PIXI.Sprite; 697 | private dudeArray: Dude[]; 698 | private dudeBounds: PIXI.Rectangle; 699 | 700 | constructor() { 701 | this.app = new PIXI.Application(); 702 | document.body.appendChild(this.app.view); 703 | 704 | this.background = PIXI.Sprite.fromImage( 705 | "required/assets/BGrotate.jpg" 706 | ); 707 | this.app.stage.addChild(this.background); 708 | 709 | this.dudeArray = []; 710 | 711 | const totalDudes = 20; 712 | const dudeTexture = PIXI.Texture.fromImage( 713 | "required/assets/flowerTop.png" 714 | ); 715 | 716 | for (let i = 0; i < totalDudes; i++) { 717 | const dude = new Dude(dudeTexture); 718 | dude.anchor.set(0.5); 719 | dude.scale.set(0.8 + Math.random() * 0.3); 720 | dude.x = Math.floor(Math.random() * this.app.renderer.width); 721 | dude.y = Math.floor(Math.random() * this.app.renderer.height); 722 | dude.blendMode = PIXI.BLEND_MODES.ADD; 723 | dude.direction = Math.random() * Math.PI * 2; 724 | dude.turningSpeed = Math.random() - 0.8; 725 | dude.speed = 2 + Math.random() * 2; 726 | 727 | this.dudeArray.push(dude); 728 | this.app.stage.addChild(dude); 729 | } 730 | 731 | const dudeBoundsPadding = 100; 732 | this.dudeBounds = new PIXI.Rectangle( 733 | -dudeBoundsPadding, 734 | -dudeBoundsPadding, 735 | this.app.renderer.width + dudeBoundsPadding * 2, 736 | this.app.renderer.height + dudeBoundsPadding * 2 737 | ); 738 | 739 | this.app.ticker.add( 740 | (): void => { 741 | for (let i = 0; i < this.dudeArray.length; i++) { 742 | const dude = this.dudeArray[i]; 743 | dude.direction += dude.turningSpeed * 0.01; 744 | dude.x += Math.sin(dude.direction) * dude.speed; 745 | dude.y += Math.cos(dude.direction) * dude.speed; 746 | dude.rotation = -dude.direction - Math.PI / 2; 747 | 748 | // wrap the dudes by testing their bounds... 749 | if (dude.x < this.dudeBounds.x) { 750 | dude.x += this.dudeBounds.width; 751 | } else if ( 752 | dude.x > 753 | this.dudeBounds.x + this.dudeBounds.width 754 | ) { 755 | dude.x -= this.dudeBounds.width; 756 | } 757 | 758 | if (dude.y < this.dudeBounds.y) { 759 | dude.y += this.dudeBounds.height; 760 | } else if ( 761 | dude.y > 762 | this.dudeBounds.y + this.dudeBounds.height 763 | ) { 764 | dude.y -= this.dudeBounds.height; 765 | } 766 | } 767 | } 768 | ); 769 | } 770 | } 771 | 772 | export class CacheAsBitmap { 773 | private app: PIXI.Application; 774 | private aliens: PIXI.Sprite[]; 775 | private count: number; 776 | private alienContainer: PIXI.Container; 777 | 778 | constructor() { 779 | this.app = new PIXI.Application(); 780 | this.app.stage.interactive = true; 781 | document.body.appendChild(this.app.view); 782 | 783 | this.app.stop(); 784 | 785 | this.aliens = []; 786 | const alienFrames = [ 787 | "eggHead.png", 788 | "flowerTop.png", 789 | "helmlok.png", 790 | "skully.png" 791 | ]; 792 | 793 | this.count = 0; 794 | 795 | this.alienContainer = new PIXI.Container(); 796 | this.alienContainer.x = 400; 797 | this.alienContainer.y = 300; 798 | this.app.stage.addChild(this.alienContainer); 799 | 800 | PIXI.loader 801 | .add("spritesheet", "required/assets/monsters.json") 802 | .load( 803 | (): void => { 804 | for (let i = 0; i < 100; i++) { 805 | const frameName = alienFrames[i % 4]; 806 | 807 | const alien = PIXI.Sprite.fromFrame(frameName); 808 | alien.tint = Math.random() * 0xffffff; 809 | alien.x = Math.random() * 800 - 400; 810 | alien.y = Math.random() * 600 - 300; 811 | alien.anchor.x = 0.5; 812 | alien.anchor.y = 0.5; 813 | this.aliens.push(alien); 814 | this.alienContainer.addChild(alien); 815 | } 816 | this.app.start(); 817 | 818 | this.app.stage.on( 819 | "pointerTap", 820 | ( 821 | event: PIXI.interaction.InteractionEvent 822 | ): void => { 823 | this.alienContainer.cacheAsBitmap = !this 824 | .alienContainer.cacheAsBitmap; 825 | } 826 | ); 827 | this.app.ticker.add( 828 | (): void => { 829 | // let"s rotate the aliens a little bit 830 | for (let i = 0; i < 100; i++) { 831 | const alien = this.aliens[i]; 832 | alien.rotation += 0.1; 833 | } 834 | 835 | this.count += 0.01; 836 | 837 | this.alienContainer.scale.x = Math.sin( 838 | this.count 839 | ); 840 | this.alienContainer.scale.y = Math.sin( 841 | this.count 842 | ); 843 | this.alienContainer.rotation += 0.01; 844 | } 845 | ); 846 | } 847 | ); 848 | } 849 | } 850 | 851 | export class Dragging { 852 | private app: PIXI.Application; 853 | private data: PIXI.interaction.InteractionData; 854 | private dragging: boolean; 855 | 856 | constructor() { 857 | this.app = new PIXI.Application(800, 600, { 858 | backgroundColor: 0x1099bb 859 | }); 860 | document.body.appendChild(this.app.view); 861 | 862 | const texture = PIXI.Texture.fromImage("required/assets/bunny.png"); 863 | texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST; 864 | 865 | for (let i = 0; i < 10; i++) { 866 | this.createBunny( 867 | texture, 868 | Math.floor(Math.random() * this.app.renderer.width), 869 | Math.floor(Math.random() * this.app.renderer.height) 870 | ); 871 | } 872 | } 873 | 874 | private createBunny(texture: PIXI.Texture, x: number, y: number): void { 875 | const bunny = new PIXI.Sprite(texture); 876 | bunny.interactive = true; 877 | bunny.buttonMode = true; 878 | bunny.anchor.set(0.5); 879 | bunny.scale.set(3); 880 | bunny 881 | .on( 882 | "pointerdown", 883 | (event: PIXI.interaction.InteractionEvent): void => { 884 | this.data = event.data; 885 | bunny.alpha = 0.5; 886 | this.dragging = true; 887 | } 888 | ) 889 | .on( 890 | "pointerup", 891 | (event: PIXI.interaction.InteractionEvent): void => { 892 | this.data = null; 893 | bunny.alpha = 0.5; 894 | this.dragging = false; 895 | } 896 | ) 897 | .on( 898 | "pointerupoutside", 899 | (event: PIXI.interaction.InteractionEvent): void => { 900 | this.data = null; 901 | bunny.alpha = 0.5; 902 | this.dragging = false; 903 | } 904 | ) 905 | .on( 906 | "pointermove", 907 | (event: PIXI.interaction.InteractionEvent): void => { 908 | if (this.dragging) { 909 | const newPosition = this.data.getLocalPosition( 910 | bunny 911 | ); 912 | bunny.x = newPosition.x; 913 | bunny.y = newPosition.y; 914 | } 915 | } 916 | ); 917 | 918 | bunny.x = x; 919 | bunny.y = y; 920 | 921 | this.app.stage.addChild(bunny); 922 | } 923 | } 924 | 925 | export class GraphicsDemo { 926 | private app: PIXI.Application; 927 | private graphics: PIXI.Graphics; 928 | private thing: PIXI.Graphics; 929 | private count: number; 930 | 931 | constructor() { 932 | this.app = new PIXI.Application(800, 600, { antialias: true }); 933 | this.app.stage.interactive = true; 934 | document.body.appendChild(this.app.view); 935 | 936 | const graphics = new PIXI.Graphics(); 937 | 938 | graphics.beginFill(0xff3300); 939 | graphics.lineStyle(10, 0xffd900, 1); 940 | 941 | graphics.moveTo(50, 50); 942 | graphics.lineTo(250, 50); 943 | graphics.lineTo(100, 100); 944 | graphics.lineTo(250, 220); 945 | graphics.lineTo(50, 220); 946 | graphics.lineTo(50, 50); 947 | graphics.endFill(); 948 | 949 | graphics.lineStyle(10, 0xff0000, 0.8); 950 | graphics.beginFill(0xff700b, 1); 951 | 952 | graphics.moveTo(210, 300); 953 | graphics.lineTo(450, 320); 954 | graphics.lineTo(570, 350); 955 | graphics.quadraticCurveTo(600, 0, 480, 100); 956 | graphics.lineTo(330, 120); 957 | graphics.lineTo(410, 200); 958 | graphics.lineTo(210, 300); 959 | graphics.endFill(); 960 | 961 | graphics.lineStyle(2, 0x0000ff, 1); 962 | graphics.drawRect(50, 250, 100, 100); 963 | 964 | graphics.lineStyle(0); 965 | graphics.beginFill(0xffff0b, 0.5); 966 | graphics.drawCircle(470, 200, 100); 967 | graphics.endFill(); 968 | 969 | graphics.lineStyle(20, 0x33ff00); 970 | graphics.moveTo(30, 30); 971 | graphics.lineTo(600, 300); 972 | 973 | this.graphics = graphics; 974 | 975 | this.app.stage.addChild(this.graphics); 976 | 977 | this.thing = new PIXI.Graphics(); 978 | this.thing.x = 800 / 2; 979 | this.thing.y = 600 / 2; 980 | this.app.stage.addChild(this.thing); 981 | 982 | this.count = 0; 983 | 984 | this.app.stage.on( 985 | "pointertap", 986 | (): void => { 987 | this.graphics.lineStyle( 988 | Math.random() * 30, 989 | Math.random() * 0xffffff, 990 | 1 991 | ); 992 | this.graphics.moveTo( 993 | Math.random() * 800, 994 | Math.random() * 600 995 | ); 996 | this.graphics.bezierCurveTo( 997 | Math.random() * 800, 998 | Math.random() * 600, 999 | Math.random() * 800, 1000 | Math.random() * 600, 1001 | Math.random() * 800, 1002 | Math.random() * 600 1003 | ); 1004 | } 1005 | ); 1006 | 1007 | this.app.ticker.add( 1008 | (): void => { 1009 | this.count += 0.1; 1010 | 1011 | this.thing.clear(); 1012 | this.thing.lineStyle(10, 0xff0000, 1); 1013 | this.thing.beginFill(0xffff00, 0.5); 1014 | 1015 | this.thing.moveTo( 1016 | -120 + Math.sin(this.count) * 20, 1017 | -100 + Math.cos(this.count) * 20 1018 | ); 1019 | this.thing.lineTo( 1020 | 120 + Math.cos(this.count) * 20, 1021 | -100 + Math.sin(this.count) * 20 1022 | ); 1023 | this.thing.lineTo( 1024 | 120 + Math.sin(this.count) * 20, 1025 | 100 + Math.cos(this.count) * 20 1026 | ); 1027 | this.thing.lineTo( 1028 | -120 + Math.cos(this.count) * 20, 1029 | 100 + Math.sin(this.count) * 20 1030 | ); 1031 | this.thing.lineTo( 1032 | -120 + Math.sin(this.count) * 20, 1033 | -100 + Math.cos(this.count) * 20 1034 | ); 1035 | 1036 | this.thing.rotation = this.count * 0.1; 1037 | } 1038 | ); 1039 | } 1040 | } 1041 | 1042 | export class Interactivity { 1043 | private app: PIXI.Application; 1044 | private background: PIXI.Sprite; 1045 | private buttons: PIXI.Sprite[]; 1046 | 1047 | constructor() { 1048 | this.app = new PIXI.Application(); 1049 | document.body.appendChild(this.app.view); 1050 | 1051 | const background = PIXI.Sprite.fromImage( 1052 | "required/assets/button_test_BG.jpg" 1053 | ); 1054 | background.width = this.app.renderer.width; 1055 | background.height = this.app.renderer.height; 1056 | this.background = background; 1057 | this.app.stage.addChild(this.background); 1058 | 1059 | this.buttons = []; 1060 | 1061 | const buttonPositions = [ 1062 | 175, 1063 | 75, 1064 | 655, 1065 | 75, 1066 | 410, 1067 | 325, 1068 | 150, 1069 | 465, 1070 | 685, 1071 | 445 1072 | ]; 1073 | 1074 | const textureButton = PIXI.Texture.fromImage( 1075 | "../../_assets/button.png" 1076 | ); 1077 | const textureButtonDown = PIXI.Texture.fromImage( 1078 | "../../_assets/buttonDown.png" 1079 | ); 1080 | const textureButtonOver = PIXI.Texture.fromImage( 1081 | "../../_assets/buttonOver.png" 1082 | ); 1083 | 1084 | for (let i = 0; i < 5; i++) { 1085 | const button = new PIXI.Sprite(textureButton); 1086 | button.anchor.set(0.5); 1087 | button.x = buttonPositions[i * 2]; 1088 | button.y = buttonPositions[i * 2 + 1]; 1089 | button.interactive = true; 1090 | button.buttonMode = true; 1091 | 1092 | button 1093 | .on( 1094 | "pointerdown", 1095 | (): void => { 1096 | // blah 1097 | } 1098 | ) 1099 | .on( 1100 | "pointerup", 1101 | (): void => { 1102 | // blah 1103 | } 1104 | ) 1105 | .on( 1106 | "pointerupoutside", 1107 | (): void => { 1108 | // blah 1109 | } 1110 | ) 1111 | .on( 1112 | "pointerover", 1113 | (): void => { 1114 | // blah 1115 | } 1116 | ) 1117 | .on( 1118 | "pointerout", 1119 | (): void => { 1120 | // blah 1121 | } 1122 | ); 1123 | 1124 | this.app.stage.addChild(button); 1125 | this.buttons.push(button); 1126 | } 1127 | 1128 | this.buttons[0].scale.set(1.2); 1129 | this.buttons[2].rotation = Math.PI / 10; 1130 | this.buttons[3].scale.set(0.8); 1131 | this.buttons[4].scale.set(0.8, 1.2); 1132 | this.buttons[4].rotation = Math.PI; 1133 | } 1134 | } 1135 | 1136 | export class Masking { 1137 | private app: PIXI.Application; 1138 | private bg: PIXI.Sprite; 1139 | private container: PIXI.Container; 1140 | private bgFront: PIXI.Sprite; 1141 | private light1: PIXI.Sprite; 1142 | private light2: PIXI.Sprite; 1143 | private panda: PIXI.Sprite; 1144 | private thing: PIXI.Graphics; 1145 | private count: number; 1146 | private help: PIXI.Text; 1147 | 1148 | constructor() { 1149 | this.app = new PIXI.Application(800, 600, { antialias: true }); 1150 | this.app.stage.interactive = true; 1151 | document.body.appendChild(this.app.view); 1152 | 1153 | this.bg = PIXI.Sprite.fromImage("required/assets/BGrotate.jpg"); 1154 | this.bg.anchor.set(0.5); 1155 | this.bg.x = this.app.renderer.width / 2; 1156 | this.bg.y = this.app.renderer.height / 2; 1157 | this.app.stage.addChild(this.bg); 1158 | 1159 | this.container = new PIXI.Container(); 1160 | this.container.x = this.app.renderer.width / 2; 1161 | this.container.y = this.app.renderer.height / 2; 1162 | this.app.stage.addChild(this.container); 1163 | 1164 | this.bgFront = PIXI.Sprite.fromImage( 1165 | "required/assets/SceneRotate.jpg" 1166 | ); 1167 | this.bgFront.anchor.set(0.5); 1168 | 1169 | this.light2 = PIXI.Sprite.fromImage( 1170 | "required/assets/LightRotate2.png" 1171 | ); 1172 | this.light2.anchor.set(0.5); 1173 | 1174 | this.light1 = PIXI.Sprite.fromImage( 1175 | "required/assets/LightRotate1.png" 1176 | ); 1177 | this.light1.anchor.set(0.5); 1178 | 1179 | this.panda = PIXI.Sprite.fromImage("required/assets/panda.png"); 1180 | this.panda.anchor.set(0.5); 1181 | 1182 | this.container.addChild( 1183 | this.bgFront, 1184 | this.light2, 1185 | this.light1, 1186 | this.panda 1187 | ); 1188 | 1189 | this.app.stage.addChild(this.container); 1190 | 1191 | this.thing = new PIXI.Graphics(); 1192 | this.app.stage.addChild(this.thing); 1193 | this.thing.x = this.app.renderer.width / 2; 1194 | this.thing.y = this.app.renderer.height / 2; 1195 | this.thing.lineStyle(0); 1196 | this.container.mask = this.thing; 1197 | 1198 | this.count = 0; 1199 | 1200 | this.app.stage.on( 1201 | "pointertap", 1202 | (): void => { 1203 | if (!this.container.mask) { 1204 | this.container.mask = this.thing; 1205 | } else { 1206 | this.container.mask = null; 1207 | } 1208 | } 1209 | ); 1210 | 1211 | this.app.ticker.add( 1212 | (): void => { 1213 | this.bg.rotation += 0.01; 1214 | this.bgFront.rotation -= 0.01; 1215 | 1216 | this.light1.rotation += 0.02; 1217 | this.light2.rotation += 0.01; 1218 | 1219 | this.panda.scale.x = 1 + Math.sin(this.count) * 0.04; 1220 | this.panda.scale.y = 1 + Math.cos(this.count) * 0.04; 1221 | 1222 | this.count += 0.1; 1223 | 1224 | this.thing.clear(); 1225 | 1226 | this.thing.beginFill(0x8bc5ff, 0.4); 1227 | this.thing.moveTo( 1228 | -120 + Math.sin(this.count) * 20, 1229 | -100 + Math.cos(this.count) * 20 1230 | ); 1231 | this.thing.lineTo( 1232 | -320 + Math.cos(this.count) * 20, 1233 | 100 + Math.sin(this.count) * 20 1234 | ); 1235 | this.thing.lineTo( 1236 | 120 + Math.cos(this.count) * 20, 1237 | -100 + Math.sin(this.count) * 20 1238 | ); 1239 | this.thing.lineTo( 1240 | 120 + Math.sin(this.count) * 20, 1241 | 100 + Math.cos(this.count) * 20 1242 | ); 1243 | this.thing.lineTo( 1244 | -120 + Math.cos(this.count) * 20, 1245 | 100 + Math.sin(this.count) * 20 1246 | ); 1247 | this.thing.lineTo( 1248 | -120 + Math.sin(this.count) * 20, 1249 | -300 + Math.cos(this.count) * 20 1250 | ); 1251 | this.thing.lineTo( 1252 | -320 + Math.sin(this.count) * 20, 1253 | -100 + Math.cos(this.count) * 20 1254 | ); 1255 | this.thing.rotation = this.count * 0.1; 1256 | } 1257 | ); 1258 | } 1259 | } 1260 | 1261 | export class RenderTextureDemo { 1262 | private app: PIXI.Application; 1263 | 1264 | private renderTexture: PIXI.RenderTexture; 1265 | private renderTexture2: PIXI.RenderTexture; 1266 | private currentTexture: PIXI.RenderTexture; 1267 | 1268 | private outputSprite: PIXI.Sprite; 1269 | private stuffContainer: PIXI.Container; 1270 | 1271 | private items: PIXI.Sprite[]; 1272 | 1273 | private count: number; 1274 | 1275 | constructor() { 1276 | this.app = new PIXI.Application(); 1277 | document.body.appendChild(this.app.view); 1278 | 1279 | this.renderTexture = PIXI.RenderTexture.create( 1280 | this.app.renderer.width, 1281 | this.app.renderer.height 1282 | ); 1283 | this.renderTexture2 = PIXI.RenderTexture.create( 1284 | this.app.renderer.width, 1285 | this.app.renderer.height 1286 | ); 1287 | this.currentTexture = this.renderTexture; 1288 | 1289 | this.outputSprite = new PIXI.Sprite(this.currentTexture); 1290 | this.outputSprite.x = 400; 1291 | this.outputSprite.y = 300; 1292 | this.outputSprite.anchor.set(0.5); 1293 | this.app.stage.addChild(this.outputSprite); 1294 | 1295 | this.stuffContainer = new PIXI.Container(); 1296 | this.stuffContainer.x = 400; 1297 | this.stuffContainer.y = 300; 1298 | this.app.stage.addChild(this.stuffContainer); 1299 | 1300 | const fruits = [ 1301 | "required/assets/spinObj_01.png", 1302 | "required/assets/spinObj_02.png", 1303 | "required/assets/spinObj_03.png", 1304 | "required/assets/spinObj_04.png", 1305 | "required/assets/spinObj_05.png", 1306 | "required/assets/spinObj_06.png", 1307 | "required/assets/spinObj_07.png", 1308 | "required/assets/spinObj_08.png" 1309 | ]; 1310 | 1311 | this.items = []; 1312 | 1313 | for (let i = 0; i < 20; i++) { 1314 | const item = PIXI.Sprite.fromImage(fruits[i % fruits.length]); 1315 | item.x = Math.random() * 400 - 200; 1316 | item.y = Math.random() * 400 - 200; 1317 | item.anchor.set(0.5); 1318 | this.stuffContainer.addChild(item); 1319 | this.items.push(item); 1320 | } 1321 | 1322 | this.count = 0; 1323 | 1324 | this.app.ticker.add( 1325 | (): void => { 1326 | for (let i = 0; i < this.items.length; i++) { 1327 | const item = this.items[i]; 1328 | item.rotation += 0.1; 1329 | } 1330 | 1331 | this.count += 0.01; 1332 | 1333 | const temp = this.renderTexture; 1334 | this.renderTexture = this.renderTexture2; 1335 | this.renderTexture2 = temp; 1336 | 1337 | this.outputSprite.texture = this.renderTexture; 1338 | 1339 | this.stuffContainer.rotation -= 0.01; 1340 | this.outputSprite.scale.set(1 + Math.sin(this.count) * 0.2); 1341 | 1342 | this.app.renderer.render( 1343 | this.app.stage, 1344 | this.renderTexture2, 1345 | false 1346 | ); 1347 | } 1348 | ); 1349 | } 1350 | } 1351 | 1352 | export class StripDemo { 1353 | private app: PIXI.Application; 1354 | private count: number; 1355 | private points: PIXI.Point[]; 1356 | private strip: PIXI.mesh.Rope; 1357 | private snakeContainer: PIXI.Container; 1358 | 1359 | constructor() { 1360 | this.app = new PIXI.Application(); 1361 | document.body.appendChild(this.app.view); 1362 | 1363 | this.count = 0; 1364 | 1365 | const ropeLength = 918 / 20; 1366 | 1367 | this.points = []; 1368 | 1369 | for (let i = 0; i < 20; i++) { 1370 | this.points.push(new PIXI.Point(i * ropeLength, 0)); 1371 | } 1372 | 1373 | this.strip = new PIXI.mesh.Rope( 1374 | PIXI.Texture.fromImage("required/assets/snake.png"), 1375 | this.points 1376 | ); 1377 | this.strip.x = -459; 1378 | 1379 | this.snakeContainer = new PIXI.Container(); 1380 | this.snakeContainer.position.x = 400; 1381 | this.snakeContainer.position.y = 300; 1382 | this.snakeContainer.scale.set(800 / 1100); 1383 | this.snakeContainer.addChild(this.strip); 1384 | this.app.stage.addChild(this.snakeContainer); 1385 | 1386 | this.app.ticker.add( 1387 | (): void => { 1388 | this.count += 0.1; 1389 | for (let i = 0; i < this.points.length; i++) { 1390 | this.points[i].y = Math.sin(i * 0.5 + this.count) * 30; 1391 | this.points[i].x = 1392 | i * ropeLength + 1393 | Math.cos(i * 0.3 + this.count) * 20; 1394 | } 1395 | } 1396 | ); 1397 | } 1398 | } 1399 | 1400 | export class TextDemo { 1401 | private app: PIXI.Application; 1402 | private bitmapFontText: PIXI.extras.BitmapText; 1403 | private background: PIXI.Sprite; 1404 | private textSample: PIXI.Text; 1405 | private spinningText: PIXI.Text; 1406 | private countingText: PIXI.Text; 1407 | private count: number; 1408 | 1409 | constructor() { 1410 | this.app = new PIXI.Application(); 1411 | document.body.appendChild(this.app.view); 1412 | 1413 | PIXI.loader.add("desyrel", "required/assets/desyrel.xml").load( 1414 | (): void => { 1415 | this.bitmapFontText = new PIXI.extras.BitmapText( 1416 | "bitmap fonts are\n now supported!", 1417 | { font: "35px Desyrel", align: "right" } 1418 | ); 1419 | this.bitmapFontText.x = 1420 | this.app.renderer.width - 1421 | this.bitmapFontText.textWidth - 1422 | 20; 1423 | this.bitmapFontText.y = 20; 1424 | this.app.stage.addChild(this.bitmapFontText); 1425 | } 1426 | ); 1427 | 1428 | this.background = PIXI.Sprite.fromImage( 1429 | "required/assets/textDemoBG.jpg" 1430 | ); 1431 | this.background.width = this.app.renderer.width; 1432 | this.background.height = this.app.renderer.height; 1433 | this.app.stage.addChild(this.background); 1434 | 1435 | this.textSample = new PIXI.Text( 1436 | "Pixi.js can has\n multiline text!", 1437 | { 1438 | fontFamily: "Snippet", 1439 | fontSize: 35, 1440 | fill: "white", 1441 | align: "left" 1442 | } 1443 | ); 1444 | this.textSample.position.set(20); 1445 | 1446 | this.spinningText = new PIXI.Text('I"m fun!', { 1447 | fontWeight: "bold", 1448 | fontSize: 60, 1449 | fontFamily: "Arial", 1450 | fill: "#cc00ff", 1451 | align: "center", 1452 | stroke: "#FFFFFF", 1453 | strokeThickness: 6 1454 | }); 1455 | this.spinningText.anchor.set(0.5); 1456 | this.spinningText.x = this.app.renderer.width / 2; 1457 | this.spinningText.y = this.app.renderer.height / 2; 1458 | 1459 | this.countingText = new PIXI.Text("COUNT 4Elet: 0", { 1460 | fontWeight: "bold", 1461 | fontStyle: "italic", 1462 | fontSize: 60, 1463 | fontFamily: "Arvo", 1464 | fill: "#3e1707", 1465 | align: "center", 1466 | stroke: "#a4410e", 1467 | strokeThickness: 7 1468 | }); 1469 | 1470 | this.countingText.x = this.app.renderer.width / 2; 1471 | this.countingText.y = 500; 1472 | this.countingText.anchor.x = 0.5; 1473 | 1474 | this.app.stage.addChild( 1475 | this.textSample, 1476 | this.spinningText, 1477 | this.countingText 1478 | ); 1479 | 1480 | this.count = 0; 1481 | 1482 | this.app.ticker.add( 1483 | (): void => { 1484 | this.count += 0.05; 1485 | this.countingText.text = 1486 | "COUNT 4Elet: " + Math.floor(this.count); 1487 | 1488 | this.spinningText.rotation += 0.03; 1489 | } 1490 | ); 1491 | } 1492 | } 1493 | 1494 | export class TextureRotate { 1495 | private app: PIXI.Application; 1496 | private bol: boolean; 1497 | private texture: PIXI.Texture; 1498 | private secondTexture: PIXI.Texture; 1499 | private dude: PIXI.Sprite; 1500 | 1501 | constructor() { 1502 | this.app = new PIXI.Application(); 1503 | document.body.appendChild(this.app.view); 1504 | 1505 | this.bol = false; 1506 | 1507 | PIXI.loader.add("flowerTop", "required/assets/flowerTop.png"); 1508 | PIXI.loader.load((loader: PIXI.loaders.Loader, resources: any) => { 1509 | this.texture = resources.flowerTop.texture; 1510 | this.init(); 1511 | }); 1512 | } 1513 | 1514 | private init(): void { 1515 | const textures = [this.texture]; 1516 | const D8 = PIXI.GroupD8; 1517 | for (let rotate = 1; rotate < 16; rotate++) { 1518 | const h = D8.isVertical(rotate) 1519 | ? this.texture.frame.width 1520 | : this.texture.frame.height; 1521 | const w = D8.isVertical(rotate) 1522 | ? this.texture.frame.height 1523 | : this.texture.frame.width; 1524 | 1525 | const frame = this.texture.frame; 1526 | const crop = new PIXI.Rectangle( 1527 | this.texture.frame.x, 1528 | this.texture.frame.y, 1529 | w, 1530 | h 1531 | ); 1532 | const trim = crop; 1533 | let rotatedTexture: PIXI.Texture; 1534 | if (rotate % 2 === 0) { 1535 | rotatedTexture = new PIXI.Texture( 1536 | this.texture.baseTexture, 1537 | frame, 1538 | crop, 1539 | trim, 1540 | rotate 1541 | ); 1542 | } else { 1543 | rotatedTexture = new PIXI.Texture( 1544 | this.texture.baseTexture, 1545 | frame, 1546 | crop, 1547 | trim, 1548 | rotate - 1 1549 | ); 1550 | rotatedTexture.rotate++; 1551 | } 1552 | textures.push(rotatedTexture); 1553 | } 1554 | 1555 | const offsetX = (this.app.renderer.width / 16) | 0; 1556 | const offsetY = (this.app.renderer.height / 8) | 0; 1557 | const gridW = (this.app.renderer.width / 4) | 0; 1558 | const gridH = (this.app.renderer.height / 5) | 0; 1559 | 1560 | for (let i = 0; i < 16; i++) { 1561 | const dude = new PIXI.Sprite( 1562 | textures[i < 8 ? i * 2 : (i - 8) * 2 + 1] 1563 | ); 1564 | dude.scale.x = 0.5; 1565 | dude.scale.y = 0.5; 1566 | dude.x = offsetX + gridW * (i % 4); 1567 | dude.y = offsetY + gridH * ((i / 4) | 0); 1568 | this.app.stage.addChild(dude); 1569 | 1570 | const text = new PIXI.Text("rotate = " + dude.texture.rotate, { 1571 | fontFamily: "Courier New", 1572 | fontSize: "12px", 1573 | fill: "white", 1574 | align: "left" 1575 | }); 1576 | text.x = dude.x; 1577 | text.y = dude.y - 20; 1578 | this.app.stage.addChild(text); 1579 | } 1580 | } 1581 | } 1582 | 1583 | export class TextureSwap { 1584 | private app: PIXI.Application; 1585 | private bol: boolean; 1586 | private texture: PIXI.Texture; 1587 | private secondTexture: PIXI.Texture; 1588 | private dude: PIXI.Sprite; 1589 | 1590 | constructor() { 1591 | this.app = new PIXI.Application(); 1592 | document.body.appendChild(this.app.view); 1593 | 1594 | this.bol = false; 1595 | 1596 | this.texture = PIXI.Texture.fromImage( 1597 | "required/assets/flowerTop.png" 1598 | ); 1599 | 1600 | this.secondTexture = PIXI.Texture.fromImage( 1601 | "required/assets/eggHead.png" 1602 | ); 1603 | 1604 | this.dude = new PIXI.Sprite(this.texture); 1605 | this.dude.anchor.set(0.5); 1606 | this.dude.x = this.app.renderer.width / 2; 1607 | this.dude.y = this.app.renderer.height / 2; 1608 | this.dude.interactive = true; 1609 | this.dude.buttonMode = true; 1610 | this.app.stage.addChild(this.dude); 1611 | 1612 | this.dude.on( 1613 | "pointertap", 1614 | (): void => { 1615 | this.bol = !this.bol; 1616 | if (this.bol) { 1617 | this.dude.texture = this.secondTexture; 1618 | } else { 1619 | this.dude.texture = this.texture; 1620 | } 1621 | } 1622 | ); 1623 | 1624 | this.app.ticker.add( 1625 | (): void => { 1626 | this.dude.rotation += 0.1; 1627 | } 1628 | ); 1629 | } 1630 | } 1631 | 1632 | export class Tinting { 1633 | private app: PIXI.Application; 1634 | private aliens: Dude[]; 1635 | 1636 | constructor() { 1637 | this.app = new PIXI.Application(); 1638 | document.body.appendChild(this.app.view); 1639 | 1640 | this.aliens = []; 1641 | 1642 | const totalDudes = 20; 1643 | 1644 | const dudeTexture = PIXI.Texture.fromImage( 1645 | "required/assets/eggHead.png" 1646 | ); 1647 | 1648 | for (let i = 0; i < totalDudes; i++) { 1649 | const dude = new Dude(dudeTexture); 1650 | dude.anchor.set(0.5); 1651 | dude.scale.set(0.8 + Math.random() * 0.3); 1652 | dude.x = Math.random() * this.app.renderer.width; 1653 | dude.y = Math.random() * this.app.renderer.height; 1654 | dude.tint = Math.random() * 0xffffff; 1655 | dude.direction = Math.random() * Math.PI * 2; 1656 | dude.turningSpeed = Math.random() - 0.8; 1657 | dude.speed = 2 + Math.random() * 2; 1658 | 1659 | this.aliens.push(dude); 1660 | this.app.stage.addChild(dude); 1661 | } 1662 | 1663 | const dudeBoundsPadding = 100; 1664 | const dudeBounds = new PIXI.Rectangle( 1665 | -dudeBoundsPadding, 1666 | -dudeBoundsPadding, 1667 | this.app.renderer.width + dudeBoundsPadding * 2, 1668 | this.app.renderer.height + dudeBoundsPadding * 2 1669 | ); 1670 | 1671 | this.app.ticker.add( 1672 | (): void => { 1673 | for (let i = 0; i < this.aliens.length; i++) { 1674 | const dude = this.aliens[i]; 1675 | dude.direction += dude.turningSpeed * 0.01; 1676 | dude.x += Math.sin(dude.direction) * dude.speed; 1677 | dude.y += Math.cos(dude.direction) * dude.speed; 1678 | dude.rotation = -dude.direction - Math.PI / 2; 1679 | 1680 | if (dude.x < dudeBounds.x) { 1681 | dude.x += dudeBounds.width; 1682 | } else if (dude.x > dudeBounds.x + dudeBounds.width) { 1683 | dude.x -= dudeBounds.width; 1684 | } 1685 | 1686 | if (dude.y < dudeBounds.y) { 1687 | dude.y += dudeBounds.height; 1688 | } else if (dude.y > dudeBounds.y + dudeBounds.height) { 1689 | dude.y -= dudeBounds.height; 1690 | } 1691 | } 1692 | } 1693 | ); 1694 | } 1695 | } 1696 | 1697 | export class TransparentBackground { 1698 | private app: PIXI.Application; 1699 | private bunny: PIXI.Sprite; 1700 | 1701 | constructor() { 1702 | this.app = new PIXI.Application(800, 600, { transparent: true }); 1703 | document.body.appendChild(this.app.view); 1704 | 1705 | this.bunny = PIXI.Sprite.fromImage("required/assets/bunny.png"); 1706 | 1707 | this.bunny.anchor.set(0.5); 1708 | 1709 | this.bunny.x = this.app.renderer.width / 2; 1710 | this.bunny.y = this.app.renderer.height / 2; 1711 | 1712 | this.app.stage.addChild(this.bunny); 1713 | 1714 | this.app.ticker.add( 1715 | (): void => { 1716 | this.bunny.rotation += 0.1; 1717 | } 1718 | ); 1719 | } 1720 | } 1721 | } 1722 | 1723 | namespace filters { 1724 | export class BlurFilter { 1725 | private app: PIXI.Application; 1726 | private bg: PIXI.Sprite; 1727 | private littleDudes: PIXI.Sprite; 1728 | private littleRobot: PIXI.Sprite; 1729 | private blurFilter1: PIXI.filters.BlurFilter; 1730 | private blurFilter2: PIXI.filters.BlurFilter; 1731 | private count: number; 1732 | 1733 | constructor() { 1734 | this.app = new PIXI.Application(800, 600); 1735 | document.body.appendChild(this.app.view); 1736 | 1737 | this.bg = PIXI.Sprite.fromImage( 1738 | "required/assets/depth_blur_BG.jpg" 1739 | ); 1740 | this.bg.width = this.app.renderer.width; 1741 | this.bg.height = this.app.renderer.height; 1742 | this.app.stage.addChild(this.bg); 1743 | 1744 | this.littleDudes = PIXI.Sprite.fromImage( 1745 | "required/assets/depth_blur_dudes.jpg" 1746 | ); 1747 | this.littleDudes.x = this.app.renderer.width / 2 - 315; 1748 | this.littleDudes.y = 200; 1749 | this.app.stage.addChild(this.littleDudes); 1750 | 1751 | this.littleRobot = PIXI.Sprite.fromImage( 1752 | "required/assets/depth_blur_moby.jpg" 1753 | ); 1754 | this.littleRobot.x = this.app.renderer.width / 2 - 200; 1755 | this.littleRobot.y = 100; 1756 | this.app.stage.addChild(this.littleRobot); 1757 | 1758 | this.blurFilter1 = new PIXI.filters.BlurFilter(); 1759 | this.blurFilter2 = new PIXI.filters.BlurFilter(); 1760 | 1761 | this.littleDudes.filters = [this.blurFilter1]; 1762 | this.littleRobot.filters = [this.blurFilter2]; 1763 | 1764 | this.count = 0; 1765 | 1766 | this.app.ticker.add( 1767 | (): void => { 1768 | this.count += 0.005; 1769 | 1770 | const blurAmount = Math.cos(this.count); 1771 | const blurAmount2 = Math.sin(this.count); 1772 | 1773 | this.blurFilter1.blur = 20 * blurAmount; 1774 | this.blurFilter2.blur = 20 * blurAmount2; 1775 | } 1776 | ); 1777 | } 1778 | } 1779 | 1780 | export class DisplacementMap { 1781 | private app: PIXI.Application; 1782 | private container: PIXI.Container; 1783 | private maggots: DisplacementMapDude[]; 1784 | private displacementSprite: PIXI.Sprite; 1785 | private displacementFilter: PIXI.filters.DisplacementFilter; 1786 | private ring: PIXI.Sprite; 1787 | private bg: PIXI.Sprite; 1788 | private count: number; 1789 | 1790 | constructor() { 1791 | this.app = new PIXI.Application(800, 600); 1792 | this.app.stage.interactive = true; 1793 | document.body.appendChild(this.app.view); 1794 | 1795 | this.container = new PIXI.Container(); 1796 | this.app.stage.addChild(this.container); 1797 | 1798 | const padding = 100; 1799 | const bounds = new PIXI.Rectangle( 1800 | -padding, 1801 | -padding, 1802 | this.app.renderer.width + padding * 2, 1803 | this.app.renderer.height + padding * 2 1804 | ); 1805 | this.maggots = []; 1806 | 1807 | for (let i = 0; i < 20; i++) { 1808 | const maggot = new DisplacementMapDude(); 1809 | maggot.anchor.set(0.5); 1810 | this.container.addChild(maggot); 1811 | 1812 | maggot.direction = Math.random() * Math.PI * 2; 1813 | maggot.speed = 1; 1814 | maggot.turnSpeed = Math.random() - 0.8; 1815 | 1816 | maggot.position.x = Math.random() * bounds.width; 1817 | maggot.position.y = Math.random() * bounds.height; 1818 | 1819 | maggot.scale.set(1 + Math.random() * 0.3); 1820 | maggot.original = (maggot.scale).clone(); 1821 | 1822 | this.maggots.push(maggot); 1823 | } 1824 | 1825 | this.displacementSprite = PIXI.Sprite.fromImage( 1826 | "required/assets/displace.png" 1827 | ); 1828 | const displacementFilter = new PIXI.filters.DisplacementFilter( 1829 | this.displacementSprite 1830 | ); 1831 | this.app.stage.addChild(this.displacementSprite); 1832 | 1833 | this.container.filters = [displacementFilter]; 1834 | 1835 | displacementFilter.scale.x = 110; 1836 | displacementFilter.scale.y = 110; 1837 | 1838 | this.ring = PIXI.Sprite.fromImage("required/assets/ring.png"); 1839 | this.ring.anchor.set(0.5); 1840 | this.ring.visible = false; 1841 | this.app.stage.addChild(this.ring); 1842 | 1843 | this.bg = PIXI.Sprite.fromImage("required/assets/bkg-grass.jpg"); 1844 | this.bg.width = this.app.renderer.width; 1845 | this.bg.height = this.app.renderer.height; 1846 | this.bg.alpha = 0.4; 1847 | this.container.addChild(this.bg); 1848 | 1849 | this.count = 0; 1850 | 1851 | this.app.stage 1852 | .on("mousemove", this.onPointerMove) 1853 | .on("touchmove", this.onPointerMove); 1854 | 1855 | this.app.ticker.add( 1856 | (): void => { 1857 | this.count += 0.05; 1858 | 1859 | for (let i = 0; i < this.maggots.length; i++) { 1860 | const maggot = this.maggots[i]; 1861 | 1862 | maggot.direction += maggot.turnSpeed * 0.01; 1863 | maggot.x += Math.sin(maggot.direction) * maggot.speed; 1864 | maggot.y += Math.cos(maggot.direction) * maggot.speed; 1865 | 1866 | maggot.rotation = -maggot.direction - Math.PI / 2; 1867 | maggot.scale.x = 1868 | maggot.original.x + Math.sin(this.count) * 0.2; 1869 | 1870 | if (maggot.x < bounds.x) { 1871 | maggot.x += bounds.width; 1872 | } else if (maggot.x > bounds.x + bounds.width) { 1873 | maggot.x -= bounds.width; 1874 | } 1875 | 1876 | if (maggot.y < bounds.y) { 1877 | maggot.y += bounds.height; 1878 | } else if (maggot.y > bounds.y + bounds.height) { 1879 | maggot.y -= bounds.height; 1880 | } 1881 | } 1882 | } 1883 | ); 1884 | } 1885 | 1886 | private onPointerMove = ( 1887 | eventData: PIXI.interaction.InteractionEvent 1888 | ): void => { 1889 | this.ring.visible = true; 1890 | this.displacementSprite.x = eventData.data.global.x - 100; 1891 | this.displacementSprite.y = 1892 | eventData.data.global.y - this.displacementSprite.height / 2; 1893 | this.ring.x = eventData.data.global.x - 25; 1894 | this.ring.y = eventData.data.global.y; 1895 | }; 1896 | } 1897 | export class DisplacementMapDude extends PIXI.Sprite { 1898 | direction: number = 0; 1899 | speed: number = 0; 1900 | turnSpeed: number = 0; 1901 | original: PIXI.Point = new PIXI.Point(); 1902 | 1903 | constructor() { 1904 | super(PIXI.Texture.fromImage("../../_assets/maggot.png")); 1905 | } 1906 | } 1907 | 1908 | export class Filter { 1909 | private app: PIXI.Application; 1910 | private bg: PIXI.Sprite; 1911 | private filter: PIXI.filters.ColorMatrixFilter; 1912 | private container: PIXI.Container; 1913 | private bgFront: PIXI.Sprite; 1914 | private light2: PIXI.Sprite; 1915 | private light1: PIXI.Sprite; 1916 | private panda: PIXI.Sprite; 1917 | private count: number; 1918 | private enabled: boolean; 1919 | private help: PIXI.Text; 1920 | 1921 | constructor() { 1922 | this.app = new PIXI.Application(); 1923 | this.app.stage.interactive = true; 1924 | document.body.appendChild(this.app.view); 1925 | 1926 | this.bg = PIXI.Sprite.fromImage("required/assets/BGrotate.jpg"); 1927 | this.bg.anchor.set(0.5); 1928 | this.bg.x = this.app.renderer.width / 2; 1929 | this.bg.y = this.app.renderer.height / 2; 1930 | 1931 | this.filter = new PIXI.filters.ColorMatrixFilter(); 1932 | 1933 | this.container = new PIXI.Container(); 1934 | this.container.position.x = this.app.renderer.width / 2; 1935 | this.container.position.y = this.app.renderer.height / 2; 1936 | this.app.stage.addChild(this.container); 1937 | 1938 | this.bgFront = PIXI.Sprite.fromImage( 1939 | "required/assets/SceneRotate.jpg" 1940 | ); 1941 | this.bgFront.anchor.set(0.5); 1942 | this.container.addChild(this.bgFront); 1943 | 1944 | this.light2 = PIXI.Sprite.fromImage( 1945 | "required/assets/LightRotate2.png" 1946 | ); 1947 | this.light2.anchor.set(0.5); 1948 | this.container.addChild(this.light2); 1949 | 1950 | this.light1 = PIXI.Sprite.fromImage( 1951 | "../../_assets/LightRotate1.png" 1952 | ); 1953 | this.light1.anchor.set(0.5); 1954 | this.container.addChild(this.light1); 1955 | 1956 | this.panda = PIXI.Sprite.fromImage("required/assets/panda.png"); 1957 | this.panda.anchor.set(0.5); 1958 | this.container.addChild(this.panda); 1959 | 1960 | this.app.stage.filters = [this.filter]; 1961 | 1962 | this.count = 0; 1963 | this.enabled = true; 1964 | 1965 | this.app.stage.on( 1966 | "pointertap", 1967 | (): void => { 1968 | this.enabled = !this.enabled; 1969 | this.app.stage.filters = this.enabled 1970 | ? [this.filter] 1971 | : null; 1972 | } 1973 | ); 1974 | 1975 | this.help = new PIXI.Text( 1976 | "Click or tap to turn filters on / off.", 1977 | { 1978 | fontFamily: "Arial", 1979 | fontSize: 12, 1980 | fontWeight: "bold", 1981 | fill: "white" 1982 | } 1983 | ); 1984 | this.help.y = this.app.renderer.height - 25; 1985 | this.help.x = 10; 1986 | this.app.stage.addChild(this.help); 1987 | 1988 | this.app.ticker.add( 1989 | (delta: number): void => { 1990 | this.bg.rotation += 0.01; 1991 | this.bgFront.rotation -= 0.01; 1992 | this.light1.rotation += 0.02; 1993 | this.light2.rotation += 0.01; 1994 | 1995 | this.panda.scale.x = 1 + Math.sin(this.count) * 0.04; 1996 | this.panda.scale.y = 1 + Math.cos(this.count) * 0.04; 1997 | 1998 | this.count += 0.1; 1999 | 2000 | const matrix = this.filter.matrix; 2001 | 2002 | matrix[1] = Math.sin(this.count) * 3; 2003 | matrix[2] = Math.cos(this.count); 2004 | matrix[3] = Math.cos(this.count) * 1.5; 2005 | matrix[4] = Math.sin(this.count / 3) * 2; 2006 | matrix[5] = Math.sin(this.count / 2); 2007 | matrix[6] = Math.sin(this.count / 4); 2008 | } 2009 | ); 2010 | } 2011 | } 2012 | } 2013 | --------------------------------------------------------------------------------