diff --git a/pixi.js/pixi.js-tests.ts b/pixi.js/pixi.js-tests.ts index 309f7f66a..6a462fc2e 100644 --- a/pixi.js/pixi.js-tests.ts +++ b/pixi.js/pixi.js-tests.ts @@ -1,1177 +1,2762 @@ -/// +/// -function PixiTests() -{ +module basics { -var stage = new PIXI.Stage(0xFFFFFF); + export class Basics { -stage.interactive = true; + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; -var bg = PIXI.Sprite.fromImage("BGrotate.jpg"); -bg.anchor.x = 0.5; -bg.anchor.y = 0.5; + private stage: PIXI.Container; -bg.position.x = 620/2; -bg.position.y = 380/2; + private bunny: PIXI.Sprite; -stage.addChild(bg); + constructor() { -var container = new PIXI.DisplayObjectContainer(); -container.position.x = 620/2; -container.position.y = 380/2; + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); -var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); -bgFront.anchor.x = 0.5; -bgFront.anchor.y = 0.5; + // create the root of the scene graph + this.stage = new PIXI.Container(); -container.addChild(bgFront); + // create a texture from an image path + var texture: PIXI.Texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png"); -var light2 = PIXI.Sprite.fromImage("LightRotate2.png"); -light2.anchor.x = 0.5; -light2.anchor.y = 0.5; -container.addChild(light2); + // create a new Sprite using the texture + this.bunny = new PIXI.Sprite(texture); -var light1 = PIXI.Sprite.fromImage("LightRotate1.png"); -light1.anchor.x = 0.5; -light1.anchor.y = 0.5; -container.addChild(light1); + // center the sprite's anchor point + this.bunny.anchor.x = 0.5; + this.bunny.anchor.y = 0.5; -var panda = PIXI.Sprite.fromImage("panda.png"); -panda.anchor.x = 0.5; -panda.anchor.y = 0.5; + // move the sprite to the center of the screen + this.bunny.position.x = 200; + this.bunny.position.y = 150; -container.addChild(panda); + //add it to the stage + this.stage.addChild(this.bunny); -stage.addChild(container); + this.animate(); -// create a renderer instance -var renderer = PIXI.autoDetectRenderer(620, 380); + } -renderer.view.style.position = "absolute" -renderer.view.style.marginLeft = "-310px"; -renderer.view.style.marginTop = "-190px"; -renderer.view.style.top = "50%"; -renderer.view.style.left = "50%"; -renderer.view.style.display = "block"; + private animate = (): void => { -// add render view to DOM -document.body.appendChild(renderer.view); + requestAnimationFrame(this.animate); -// lets create moving shape -var thing = new PIXI.Graphics(); -stage.addChild(thing); -thing.position.x = 620/2; -thing.position.y = 380/2; -thing.lineStyle(0); + this.bunny.rotation += 0.1; -container.mask = thing; + this.renderer.render(this.stage); -var count = 0; + } -stage.click = stage.tap = function() -{ - container.mask = null; -} - -/* - * Add a pixi Logo! - */ -var logo = PIXI.Sprite.fromImage("../../logo_small.png") -stage.addChild(logo); - -logo.anchor.x = 1; -logo.position.x = 620 -logo.scale.x = logo.scale.y = 0.5; -logo.position.y = 320 -logo.interactive = true; -logo.buttonMode = true; - -logo.click = logo.tap = function() -{ - window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank") -} - -var help = new PIXI.Text("Click to turn masking on / off.", {font:"bold 12pt Arial", fill:"white"}); -help.position.y = 350; -help.position.x = 10; -stage.addChild(help); - -requestAnimFrame(animate); - -function animate() { - - bg.rotation += 0.01; - bgFront.rotation -= 0.01; - - light1.rotation += 0.02; - light2.rotation += 0.01; - - panda.scale.x = 1 + Math.sin(count) * 0.04; - panda.scale.y = 1 + Math.cos(count) * 0.04; - - count += 0.1; - - thing.clear(); - thing.lineStyle(5, 0x16f1ff, 1); - thing.beginFill(0x8bc5ff, 0.4); - thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20); - thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count)* 20); - thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count)* 20); - thing.lineTo(-120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20); - thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20); - thing.rotation = count * 0.1; - - renderer.render(stage); - requestAnimFrame( animate ); -} - -/* 13 */ - -// create an new instance of a pixi stage -var stage = new PIXI.Stage(0xFFFFFF); - -var sprite= PIXI.Sprite.fromImage("spinObj_02.png"); -//stage.addChild(sprite); -// create a renderer instance -// the 5the parameter is the anti aliasing -var renderer = PIXI.autoDetectRenderer(620, 380); - -// set the canvas width and height to fill the screen -//renderer.view.style.width = window.innerWidth + "px"; -//renderer.view.style.height = window.innerHeight + "px"; -renderer.view.style.display = "block"; - -// add render view to DOM -document.body.appendChild(renderer.view); - -var graphics = new PIXI.Graphics(); - - -// set a fill and line style -graphics.beginFill(0xFF3300); -graphics.lineStyle(10, 0xffd900, 1); - -// draw a shape -graphics.moveTo(50,50); -graphics.lineTo(250, 50); -graphics.lineTo(100, 100); -graphics.lineTo(250, 220); -graphics.lineTo(50, 220); -graphics.lineTo(50, 50); -graphics.endFill(); - -// set a fill and line style again -graphics.lineStyle(10, 0xFF0000, 0.8); -graphics.beginFill(0xFF700B, 1); - -// draw a second shape -graphics.moveTo(210,300); -graphics.lineTo(450,320); -graphics.lineTo(570,350); -graphics.lineTo(580,20); -graphics.lineTo(330,120); -graphics.lineTo(410,200); -graphics.lineTo(210,300); -graphics.endFill(); - -// draw a rectangel -graphics.lineStyle(2, 0x0000FF, 1); -graphics.drawRect(50, 250, 100, 100); - -// draw a circle -graphics.lineStyle(0); -graphics.beginFill(0xFFFF0B, 0.5); -graphics.drawCircle(470, 200,100); - -graphics.lineStyle(20, 0x33FF00); -graphics.moveTo(30,30); -graphics.lineTo(600, 300); - - -stage.addChild(graphics); - -// lets create moving shape -var thing = new PIXI.Graphics(); -stage.addChild(thing); -thing.position.x = 620/2; -thing.position.y = 380/2; - -var count = 0; - -stage.click = stage.tap = function() -{ - graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1); - graphics.moveTo(Math.random() * 620,Math.random() * 380); - graphics.lineTo(Math.random() * 620,Math.random() * 380); -} - -requestAnimFrame(animate); - -function animate1() { - - thing.clear(); - - count += 0.1; - - thing.clear(); - thing.lineStyle(30, 0xff0000, 1); - thing.beginFill(0xffFF00, 0.5); - - thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20); - thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count)* 20); - thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count)* 20); - thing.lineTo(-120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20); - thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20); - - thing.rotation = count * 0.1; - renderer.render(stage); - requestAnimFrame( animate ); -} - - -// create an new instance of a pixi stage -var stage = new PIXI.Stage(0x000000); - -// create a renderer instance -var renderer = PIXI.autoDetectRenderer(800, 600); - -// set the canvas width and height to fill the screen -renderer.view.style.width = window.innerWidth + "px"; -renderer.view.style.height = window.innerHeight + "px"; -renderer.view.style.display = "block"; - -// add render view to DOM -document.body.appendChild(renderer.view); - -// OOH! SHINY! -// create two render textures.. these dynamic textures will be used to draw the scene into itself -var renderTexture = new PIXI.RenderTexture(800, 600); -var renderTexture2 = new PIXI.RenderTexture(800, 600); -var currentTexture = renderTexture; - -// create a new sprite that uses the render texture we created above -var outputSprite = new PIXI.Sprite(currentTexture); - -// align the sprite -outputSprite.position.x = 800/2; -outputSprite.position.y = 600/2; -outputSprite.anchor.x = 0.5; -outputSprite.anchor.y = 0.5; - -// add to stage -stage.addChild(outputSprite); - -var stuffContainer = new PIXI.DisplayObjectContainer(); - -stuffContainer.position.x = 800/2; -stuffContainer.position.y = 600/2 - -stage.addChild(stuffContainer); - -// create an array of image ids.. -var fruits = ["spinObj_01.png", "spinObj_02.png", - "spinObj_03.png", "spinObj_04.png", - "spinObj_05.png", "spinObj_06.png", - "spinObj_07.png", "spinObj_08.png"]; - -// create an array of items -var items = []; - -// now create some items and randomly position them in the stuff container -for (var i=0; i < 20; i++) -{ - var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]); - item.position.x = Math.random() * 400 - 200; - item.position.y = Math.random() * 400 - 200; - - item.anchor.x = 0.5; - item.anchor.y = 0.5; - - stuffContainer.addChild(item); - console.log("_") - items.push(item); -}; - -// used for spinning! -var count = 0; - - -requestAnimFrame(animate); - -function animate2() { - - requestAnimFrame( animate ); - - for (var i=0; i < items.length; i++) - { - // rotate each item - var item = items[i]; - item.rotation += 0.1; - }; - - count += 0.01; - - // swap the buffers.. - var temp = renderTexture; - renderTexture = renderTexture2; - renderTexture2 = temp; - - - // set the new texture - outputSprite.setTexture(renderTexture); - - // twist this up! - stuffContainer.rotation -= 0.01 - outputSprite.scale.x = outputSprite.scale.y = 1 + Math.sin(count) * 0.2; - - // render the stage to the texture - // the true clears the texture before content is rendered - renderTexture2.render(stage, new PIXI.Point(0,0), true); - - // and finally render the stage - renderer.render(stage); -} - - -//// - - - -function init() -{ - var assetsToLoader = ["desyrel.fnt"]; - - // create a new loader - var loader = new PIXI.AssetLoader(assetsToLoader, false); - - //begin load - - // create an new instance of a pixi stage - var stage = new PIXI.Stage(0x66FF99); - - loader.load(); - function onAssetsLoaded() - { - var bitmapFontText = new PIXI.BitmapText("bitmap fonts are\n now supported!", {font: "35px Desyrel", align: "right"}); - bitmapFontText.position.x = 620 - bitmapFontText.width - 20; - bitmapFontText.position.y = 20; - - stage.addChild(bitmapFontText); - - - } - - - - // add a shiney background.. - var background = PIXI.Sprite.fromImage("textDemoBG.jpg"); - stage.addChild(background); - - // create a renderer instance - var renderer = PIXI.autoDetectRenderer(620, 400); - // add the renderer view element to the DOM - document.body.appendChild(renderer.view); - - requestAnimFrame(animate); - - // create some white text using the Snippet webfont - var textSample = new PIXI.Text("Pixi.js can has\nmultiline text!", {font: "35px Snippet", fill: "white", align: "left"}); - textSample.position.x = 20; - textSample.position.y = 20; - - // create a text object with a nice stroke - var spinningText = new PIXI.Text("I'm fun!", {font: "bold 60px Podkova", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6}); - // setting the anchor point to 0.5 will center align the text... great for spinning! - spinningText.anchor.x = spinningText.anchor.y = 0.5; - spinningText.position.x = 620 / 2; - spinningText.position.y = 400 / 2; - - // create a text object that will be updated.. - var countingText = new PIXI.Text("COUNT 4EVAR: 0", {font: "bold italic 60px Arvo", fill: "#3e1707", align: "center", stroke: "#a4410e", strokeThickness: 7}); - countingText.position.x = 620 / 2; - countingText.position.y = 320; - countingText.anchor.x = 0.5; - - stage.addChild(textSample); - stage.addChild(spinningText); - stage.addChild(countingText); - - var count = 0; - var score = 0; - - function animate() { - - requestAnimFrame( animate ); - count++; - if(count == 50) - { - count = 0; - score++; - // update the text... - countingText.setText("COUNT 4EVAR: " + score); - - } - // just for fun, lets rotate the text - spinningText.rotation += 0.03; - - // render the stage - renderer.render(stage); - } -} - - -///// - - - -// create an new instance of a pixi stage -var stage = new PIXI.Stage(0x97c56e); - -// create a renderer instance -var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null); - -// add the renderer view element to the DOM -document.body.appendChild(renderer.view); -renderer.view.style.position = "absolute"; -renderer.view.style.top = "0px"; -renderer.view.style.left = "0px"; -requestAnimFrame( animate ); - -// create a texture from an image path -var texture = PIXI.Texture.fromImage("p2.jpeg"); - -// create a tiling sprite.. -// requires a texture, width and height -// to work in webGL the texture size must be a power of two -var tilingSprite = new PIXI.TilingSprite(texture, window.innerWidth, window.innerHeight) - -var count = 0; - -stage.addChild(tilingSprite); - -function animate33() { - - requestAnimFrame( animate ); - - - count += 0.005 - tilingSprite.tileScale.x = 2 + Math.sin(count); - tilingSprite.tileScale.y = 2 + Math.cos(count); - - tilingSprite.tilePosition.x += 1; - tilingSprite.tilePosition.y += 1; - - // just for fun, lets rotate mr rabbit a little - //stage.interactionManager.update(); - // render the stage - renderer.render(stage); -} - - - -///// - - -// create an new instance of a pixi stage -var stage = new PIXI.Stage(0x97c56e); - -// create a renderer instance -var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null); - -// add the renderer view element to the DOM -document.body.appendChild(renderer.view); -renderer.view.style.position = "absolute"; -renderer.view.style.top = "0px"; -renderer.view.style.left = "0px"; -requestAnimFrame( animate ); - -// create a texture from an image path -var texture = PIXI.Texture.fromImage("bunny.png"); - -for (var i=0; i < 10; i++) -{ - createBunny(Math.random() * window.innerWidth, Math.random() * window.innerHeight) -}; - - -function createBunny(x, y) -{ - // create our little bunny friend.. - var bunny = new PIXI.Sprite(texture); - // bunny.width = 300; - // enable the bunny to be interactive.. this will allow it to respond to mouse and touch events - bunny.interactive = true; - // this button mode will mean the hand cursor appears when you rollover the bunny with your mouse - bunny.buttonMode = true; - - // center the bunnys anchor point - bunny.anchor.x = 0.5; - bunny.anchor.y = 0.5; - // make it a bit bigger, so its easier to touch - bunny.scale.x = bunny.scale.y = 3; - - - // use the mousedown and touchstart - bunny.mousedown = bunny.touchstart = function(data) - { - // stop the default event... - data.originalEvent.preventDefault(); - - // store a refference to the data - // The reason for this is because of multitouch - // we want to track the movement of this particular touch - this.data = data; - this.alpha = 0.9; - this.dragging = true; - }; - - // set the events for when the mouse is released or a touch is released - bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data) - { - this.alpha = 1 - this.dragging = false; - // set the interaction data to null - this.data = null; - }; - - // set the callbacks for when the mouse or a touch moves - bunny.mousemove = bunny.touchmove = function(data) - { - if(this.dragging) - { - // need to get parent coords.. - var newPosition = this.data.getLocalPosition(this.parent); - this.position.x = newPosition.x; - this.position.y = newPosition.y; - } - } - - // move the sprite to its designated position - bunny.position.x = x; - bunny.position.y = y; - - // add it to the stage - stage.addChild(bunny); -} - -function animate44() { - - requestAnimFrame( animate ); - - // just for fun, lets rotate mr rabbit a little - //stage.interactionManager.update(); - // render the stage - renderer.render(stage); -} - - - -//// - -// create an new instance of a pixi stage -var stage = new PIXI.Stage(0x66FF99); - -// create a renderer instance -var renderer = PIXI.autoDetectRenderer(400, 300, null); - -// add the renderer view element to the DOM -document.body.appendChild(renderer.view); -renderer.view.style.position = "absolute"; -renderer.view.style.top = "0px"; -renderer.view.style.left = "0px"; -requestAnimFrame( animate ); - -// create a texture from an image path -var texture = PIXI.Texture.fromImage("bunny.png"); -// create a new Sprite using the texture -var bunny = new PIXI.Sprite(texture); - -// center the sprites anchor point -bunny.anchor.x = 0.5; -bunny.anchor.y = 0.5; - -// move the sprite t the center of the screen -bunny.position.x = 200; -bunny.position.y = 150; - -stage.addChild(bunny); - -function animate55() { - - requestAnimFrame( animate ); - - // just for fun, lets rotate mr rabbit a little - bunny.rotation += 0.1; - - // render the stage - renderer.render(stage); -} - - - -/////// - - - -// create an new instance of a pixi stage -// the second parameter is interactivity... -var interactive = true; -var stage = new PIXI.Stage(0x000000); - -// create a renderer instance. -var renderer = PIXI.autoDetectRenderer(620, 400); - -// add the renderer view element to the DOM -document.body.appendChild(renderer.view); - -requestAnimFrame( animate ); - -// create a background.. -var background = PIXI.Sprite.fromImage("button_test_BG.jpg"); - -// add background to stage.. -stage.addChild(background); - -// create some textures from an image path -var textureButton = PIXI.Texture.fromImage("button.png"); -var textureButtonDown = PIXI.Texture.fromImage("buttonDown.png"); -var textureButtonOver = PIXI.Texture.fromImage("buttonOver.png"); - -var buttons = []; - -var buttonPositions = [175,75, - 600-145, 75, - 600/2 - 20, 400/2 + 10, - 175, 400-75, - 600-115, 400-95]; - - -for (var i=0; i < 5; i++) -{ - var button = new PIXI.Sprite(textureButton); - button.buttonMode = true; - - button.anchor.x = 0.5; - button.anchor.y = 0.5; - - button.position.x = buttonPositions[i*2]; - button.position.y = buttonPositions[i*2 + 1]; - - // make the button interactive.. - button.interactive = true; - - // set the mousedown and touchstart callback.. - button.mousedown = button.touchstart = function(data){ - - this.isdown = true; - this.setTexture(textureButtonDown); - this.alpha = 1; - } - - // set the mouseup and touchend callback.. - button.mouseup = button.touchend = button.mouseupoutside = button.touchendoutside = function(data){ - this.isdown = false; - - if(this.isOver) - { - this.setTexture(textureButtonOver); - } - else - { - this.setTexture(textureButton); - } - } - - // set the mouseover callback.. - button.mouseover = function(data){ - - this.isOver = true; - - if(this.isdown)return - - this.setTexture(textureButtonOver) - } - - // set the mouseout callback.. - button.mouseout = function(data){ - - this.isOver = false; - if(this.isdown)return - this.setTexture(textureButton) - } - - button.click = function(data){ - // click! - console.log("CLICK!"); - // alert("CLICK!") - } - - button.tap = function(data){ - // click! - console.log("TAP!!"); - //this.alpha = 0.5; - } - - // add it to the stage - stage.addChild(button); - - // add button to array - buttons.push(button); -}; - -// set some silly values.. - -buttons[0].scale.x = 1.2; - -buttons[1].scale.y = 1.2; - -buttons[2].rotation = Math.PI/10; - -buttons[3].scale.x = 0.8; -buttons[3].scale.y = 0.8; - -buttons[4].scale.x = 0.8; -buttons[4].scale.y = 1.2; -buttons[4].rotation = Math.PI; -// var button1 = -function animate66() { - - requestAnimFrame( animate ); - // render the stage - - // do a test.. - - renderer.render(stage); -} - -// add a logo! -var pixiLogo = PIXI.Sprite.fromImage("pixi.png"); -stage.addChild(pixiLogo); - -pixiLogo.position.x = 620 - 56; -pixiLogo.position.y = 400- 32; - -pixiLogo.click = pixiLogo.tap = function(){ - - var win=window.open("https://github.com/GoodBoyDigital/pixi.js", '_blank'); + } } +module basics { -////// + export class Click { + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + private stage: PIXI.Container; -var w = 1024; -var h = 768; + private sprite: PIXI.Sprite; -var n = 2000; -var d = 1; -var current = 1; -var objs = 17; -var vx = 0; -var vy = 0; -var vz = 0; -var points1 = []; -var points2 = []; -var points3 = []; -var tpoint1 = []; -var tpoint2 = []; -var tpoint3 = []; -var balls = []; + constructor() { -function start() { + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); - var ballTexture = PIXI.Texture.fromImage("assets/pixel.png"); + // create the root of the scene graph + this.stage = new PIXI.Container(); - renderer = PIXI.autoDetectRenderer(w, h); + this.sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png'); + this.sprite.position.set(230, 264); + this.sprite.interactive = true; + this.sprite.on('mousedown', this.onDown, this); + this.sprite.on('touchstart', this.onDown, this); - stage = new PIXI.Stage(0x000000); + //add it to the stage + this.stage.addChild(this.sprite); - document.body.appendChild(renderer.view); + //start animatng + this.animate(); - makeObject(0); + } - for (var i = 0; i < n; i++) - { - tpoint1[i] = points1[i]; - tpoint2[i] = points2[i]; - tpoint3[i] = points3[i]; + private onDown = (eventData: PIXI.interaction.InteractionData): void => { - var tempBall = new PIXI.Sprite(ballTexture); - tempBall.anchor.x = 0.5; - tempBall.anchor.y = 0.5; - tempBall.alpha = 0.5; - balls[i] = tempBall; + this.sprite.scale.x += 0.3; + this.sprite.scale.y += 0.3; - stage.addChild(tempBall); - } + } + private animate = (): void => { + requestAnimationFrame(this.animate); - setTimeout(nextObject, 5000); + this.renderer.render(this.stage); - requestAnimFrame(update); + } + + } } -function nextObject () { +module basics { - current++; + export class Container { - if (current > objs) - { - current = 0; - } + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; - makeObject(current); + private stage: PIXI.Container; - setTimeout(nextObject, 8000); + private container: PIXI.Container; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.container = new PIXI.Container(); + + this.stage.addChild(this.container); + + for (var j = 0; j < 5; j++) { + + for (var i = 0; i < 5; i++) { + + var bunny: PIXI.Sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png'); + bunny.x = 40 * i; + bunny.y = 40 * j; + this.container.addChild(bunny); + + }; + + }; + + /* + * All the bunnies are added to the container with the addChild method + * when you do this, all the bunnies become children of the container, and when a container moves, + * so do all its children. + * This gives you a lot of flexibility and makes it easier to position elements on the screen + */ + this.container.x = 100; + this.container.y = 60; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } } -function makeObject ( t ) { +module basics { - var xd; + export class CustomFilter { - switch (t) - { - case 0: + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; - for (var i = 0; i < n; i++) - { - points1[i] = -50 + Math.round(Math.random() * 100); - points2[i] = 0; - points3[i] = 0; - } - break; + private stage: PIXI.Container; - case 1: + private background: PIXI.Sprite; - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(t * 360 / n) * 10); - points2[i] = (Math.cos(xd) * 10) * (Math.sin(t * 360 / n) * 10); - points3[i] = Math.sin(xd) * 100; - } - break; + private filter: CustomizedFilter; - case 2: + constructor() { - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(t * 360 / n) * 10); - points2[i] = (Math.cos(xd) * 10) * (Math.sin(t * 360 / n) * 10); - points3[i] = Math.sin(i * 360 / n) * 100; - } - break; + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); - case 3: + // create the root of the scene graph + this.stage = new PIXI.Container(); - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10); - points2[i] = (Math.cos(xd) * 10) * (Math.sin(xd) * 10); - points3[i] = Math.sin(xd) * 100; - } - break; + this.background = PIXI.Sprite.fromImage('../../_assets/bkg-grass.jpg'); + this.background.scale.set(1.3, 1); + this.stage.addChild(this.background); - case 4: - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10); - points2[i] = (Math.cos(xd) * 10) * (Math.sin(xd) * 10); - points3[i] = Math.sin(i * 360 / n) * 100; - } - break; + PIXI.loader.add('shader', '../../_assets/basics/shader.frag'); + PIXI.loader.once('complete', this.onLoaded, this); + PIXI.loader.load(); - case 5: + } - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10); - points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(xd) * 10); - points3[i] = Math.sin(i * 360 / n) * 100; - } - break; + private onLoaded(loader: PIXI.loaders.Loader, res: any) { - case 6: + var fragmentSrc = res.shader.data; - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10); - points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(xd) * 10); - points3[i] = Math.sin(i * 360 / n) * 100; - } - break; + this.filter = new CustomizedFilter(fragmentSrc); + this.background.filters = [this.filter]; - case 7: + this.animate(); - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10); - points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(i * 360 / n) * 10); - points3[i] = Math.sin(i * 360 / n) * 100; - } - break; - case 8: + } - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10); - points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(i * 360 / n) * 10); - points3[i] = Math.sin(xd) * 100; - } - break; + private animate = (): void => { - case 9: + this.filter.uniforms.customUniform.value += 0.04; - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10); - points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(xd) * 10); - points3[i] = Math.sin(xd) * 100; - } - break; + this.renderer.render(this.stage); + requestAnimationFrame(this.animate); - case 10: + } - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10); - points2[i] = (Math.cos(xd) * 10) * (Math.sin(xd) * 10); - points3[i] = Math.sin(i * 360 / n) * 100; - } - break; + } - case 11: + export class CustomizedFilter extends PIXI.AbstractFilter { - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10); - points2[i] = (Math.sin(xd) * 10) * (Math.sin(i * 360 / n) * 10); - points3[i] = Math.sin(xd) * 100; - } - break; + constructor(fragmentSource: string | string[]) { + super(null, fragmentSource, { + customUniform: { + type: '1f', + value: 0 + } + }) + } - case 12: - - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10); - points2[i] = (Math.sin(xd) * 10) * (Math.sin(xd) * 10); - points3[i] = Math.sin(i * 360 / n) * 100; - } - break; - - case 13: - - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10); - points2[i] = (Math.sin(i * 360 / n) * 10) * (Math.sin(xd) * 10); - points3[i] = Math.sin(i * 360 / n) * 100; - } - break; - - case 14: - - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.sin(xd) * 10) * (Math.cos(xd) * 10); - points2[i] = (Math.sin(xd) * 10) * (Math.sin(i * 360 / n) * 10); - points3[i] = Math.sin(i * 360 / n) * 100; - } - break; - - case 15: - - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(i * 360 / n) * 10) * (Math.cos(i * 360 / n) * 10); - points2[i] = (Math.sin(i * 360 / n) * 10) * (Math.sin(xd) * 10); - points3[i] = Math.sin(i * 360 / n) * 100; - } - break; - - case 16: - - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(i * 360 / n) * 10); - points2[i] = (Math.sin(i * 360 / n) * 10) * (Math.sin(xd) * 10); - points3[i] = Math.sin(xd) * 100; - } - break; - - case 17: - - for (var i = 0; i < n; i++) - { - xd = -90 + Math.round(Math.random() * 180); - points1[i] = (Math.cos(xd) * 10) * (Math.cos(xd) * 10); - points2[i] = (Math.cos(i * 360 / n) * 10) * (Math.sin(i * 360 / n) * 10); - points3[i] = Math.sin(i * 360 / n) * 100; - } - break; - } + } } +module basics { + export class Graphics { -function update() -{ - var x3d, y3d, z3d, tx, ty, tz, ox; + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; - if (d < 250) - { - d++; - } + private stage: PIXI.Container; - vx += 0.0075; - vy += 0.0075; - vz += 0.0075; + private graphics: PIXI.Graphics; - for (var i = 0; i < n; i++) - { - if (points1[i] > tpoint1[i]) { tpoint1[i] = tpoint1[i] + 1; } - if (points1[i] < tpoint1[i]) { tpoint1[i] = tpoint1[i] - 1; } - if (points2[i] > tpoint2[i]) { tpoint2[i] = tpoint2[i] + 1; } - if (points2[i] < tpoint2[i]) { tpoint2[i] = tpoint2[i] - 1; } - if (points3[i] > tpoint3[i]) { tpoint3[i] = tpoint3[i] + 1; } - if (points3[i] < tpoint3[i]) { tpoint3[i] = tpoint3[i] - 1; } + constructor() { - x3d = tpoint1[i]; - y3d = tpoint2[i]; - z3d = tpoint3[i]; + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); - ty = (y3d * Math.cos(vx)) - (z3d * Math.sin(vx)); - tz = (y3d * Math.sin(vx)) + (z3d * Math.cos(vx)); - tx = (x3d * Math.cos(vy)) - (tz * Math.sin(vy)); - tz = (x3d * Math.sin(vy)) + (tz * Math.cos(vy)); - ox = tx; - tx = (tx * Math.cos(vz)) - (ty * Math.sin(vz)); - ty = (ox * Math.sin(vz)) + (ty * Math.cos(vz)); + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; - balls[i].position.x = (512 * tx) / (d - tz) + w / 2; - balls[i].position.y = (h/2) - (512 * ty) / (d - tz); + this.graphics = new PIXI.Graphics(); + + // draw a shape + this.graphics.moveTo(50, 50); + this.graphics.lineTo(250, 50); + this.graphics.lineTo(100, 100); + this.graphics.lineTo(50, 50); + this.graphics.endFill(); - } + // set a fill and a line style again and draw a rectangle + this.graphics.lineStyle(2, 0x0000FF, 1); + this.graphics.beginFill(0xFF700B, 1); + this.graphics.drawRect(50, 250, 120, 120); - renderer.render(stage); + // draw a rounded rectangle + this.graphics.lineStyle(2, 0xFF00FF, 1); + this.graphics.beginFill(0xFF00BB, 0.25); + this.graphics.drawRoundedRect(150, 450, 300, 100, 15); + this.graphics.endFill(); - requestAnimFrame(update); -} + // draw a circle, set the lineStyle to zero so the circle doesn't have an outline + this.graphics.lineStyle(0); + this.graphics.beginFill(0xFFFF0B, 0.5); + this.graphics.drawCircle(470, 90, 60); + this.graphics.endFill(); + this.stage.addChild(this.graphics); + // start animating + this.animate(); -/////// + } + private animate = (): void => { + requestAnimationFrame(this.animate); -// Globals, globals everywhere and not a drop to drink -var w = 1024; -var h = 768; -var starCount = 2500; -var sx = 1.0 + (Math.random() / 20); -var sy = 1.0 + (Math.random() / 20); -var slideX = w / 2; -var slideY = h / 2; -var stars = []; + this.renderer.render(this.stage); -function start2() { + } - var ballTexture = PIXI.Texture.fromImage("assets/bubble_32x32.png"); - - renderer = PIXI.autoDetectRenderer(w, h); - - stage = new PIXI.Stage(0x000000); - - document.body.appendChild(renderer.view); - - for (var i = 0; i < starCount; i++) - { - var tempBall = new PIXI.Sprite(ballTexture); - - tempBall.position.x = (Math.random() * w) - slideX; - tempBall.position.y = (Math.random() * h) - slideY; - tempBall.anchor.x = 0.5; - tempBall.anchor.y = 0.5; - - stars.push({ sprite: tempBall, x: tempBall.position.x, y: tempBall.position.y }); - - stage.addChild(tempBall); - } - - document.getElementById('rnd').onclick = newWave; - document.getElementById('sx').innerHTML = 'SX: ' + sx + '
SY: ' + sy; - - - - requestAnimFrame(update); + } } -function newWave () { +module basics { - sx = 1.0 + (Math.random() / 20); - sy = 1.0 + (Math.random() / 20); - document.getElementById('sx').innerHTML = 'SX: ' + sx + '
SY: ' + sy; + export class RenderTexture { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private container: PIXI.Container; + + private renderTexture: PIXI.RenderTexture; + + private sprite: PIXI.Sprite; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.container = new PIXI.Container(); + + this.stage.addChild(this.container); + + for (var j = 0; j < 5; j++) { + + for (var i = 0; i < 5; i++) { + + var bunny: PIXI.Sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png'); + bunny.x = 40 * i; + bunny.y = 40 * j; + bunny.rotation = Math.random() * (Math.PI * 2); + this.container.addChild(bunny); + + }; + + }; + + this.renderTexture = new PIXI.RenderTexture(this.renderer, 300, 200, PIXI.SCALE_MODES.LINEAR, 0.1); + + this.sprite = new PIXI.Sprite(this.renderTexture); + this.sprite.x = 450; + this.sprite.y = 60; + this.stage.addChild(this.sprite); + + this.container.x = 100; + this.container.y = 60; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + this.renderTexture.render(this.container); + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } } +module basics { + + export class SpriteSheet { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private movie: PIXI.extras.MovieClip; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + PIXI.loader.add('../../_assets/basics/fighter.json').load((loader: PIXI.loaders.Loader, object: any): void => { + + // create an array of textures from an image path + var frames: PIXI.Texture[] = []; + + for (var i = 0; i < 30; i++) { + + var val = i < 10 ? '0' + i : i; + + // magically works since the spritesheet was loaded with the pixi loader + frames.push(PIXI.Texture.fromFrame('rollSequence00' + val + '.png')); + } -function update22() -{ - for (var i = 0; i < starCount; i++) - { - stars[i].sprite.position.x = stars[i].x + slideX; - stars[i].sprite.position.y = stars[i].y + slideY; - stars[i].x = stars[i].x * sx; - stars[i].y = stars[i].y * sy; + // create a MovieClip (brings back memories from the days of Flash, right ?) + this.movie = new PIXI.extras.MovieClip(frames); - if (stars[i].x > w) - { - stars[i].x = stars[i].x - w; - } - else if (stars[i].x < -w) - { - stars[i].x = stars[i].x + w; - } + /* + * A MovieClip inherits all the properties of a PIXI sprite + * so you can change its position, its anchor, mask it, etc + */ + this.movie.position.set(300); + this.movie.anchor.set(0.5); + this.movie.animationSpeed = 0.5; + this.movie.play(); - if (stars[i].y > h) - { - stars[i].y = stars[i].y - h; - } - else if (stars[i].y < -h) - { - stars[i].y = stars[i].y + h; - } - } + this.stage.addChild(this.movie); - renderer.render(stage); + this.animate(); + + }); + + } + + private animate = (): void => { + + this.movie.rotation += 0.01; + + //render the stage container + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } - requestAnimFrame(update); } -} \ No newline at end of file +module basics { + + export class Text { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private basicText: PIXI.Text; + + private richText: PIXI.Text; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.basicText = new PIXI.Text('Basic Text in Pixi'); + this.basicText.x = 30; + this.basicText.y = 90; + + this.stage.addChild(this.basicText); + + var style: PIXI.TextStyle = { + font: '36px Arial bold italic', + fill: '#F7EDCA', + stroke: '#4a1850', + strokeThickness: 5, + dropShadow: true, + dropShadowColor: '#000000', + dropShadowAngle: Math.PI / 6, + dropShadowDistance: 6, + wordWrap: true, + wordWrapWidth: 440 + }; + + this.richText = new PIXI.Text('Rich Text with a lot of options and across multiple lines', style); + this.richText.x = 30; + this.richText.y = 180; + + this.stage.addChild(this.richText); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + +} + +module basics { + + export class TexturedMesh { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private strip: PIXI.mesh.Rope; + + private graphics: PIXI.Graphics; + + private count: number; + + private points: PIXI.Point[]; + + private ropeLength: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.count = 0; + + this.ropeLength = 918 / 20; + this.ropeLength = 45; + + this.points = []; + + for (var i = 0; i < 25; i++) { + this.points.push(new PIXI.Point(i * this.ropeLength, 0)); + }; + + this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('../../_assets/snake.png'), this.points); + this.strip.position.x = -40; + this.strip.position.y = 300; + this.stage.addChild(this.strip); + + this.graphics = new PIXI.Graphics(); + this.graphics.x = this.strip.x; + this.graphics.y = this.strip.y; + this.stage.addChild(this.graphics); + + //start animating + this.animate(); + + } + + private animate = (): void => { + + this.count += 0.1; + + //make the snake + for (var i = 0; i < this.points.length; i++) { + + this.points[i].y = Math.sin((i * 0.5) + this.count) * 30; + + this.points[i].x = i * this.ropeLength + Math.cos((i * 0.3) + this.count) * 20; + + }; + + //render the stage + this.renderer.render(this.stage); + + this.renderPoints(); + + requestAnimationFrame(this.animate); + + } + + private renderPoints(): void { + + this.graphics.clear(); + + this.graphics.lineStyle(2, 0xffc2c2); + this.graphics.moveTo(this.points[0].x, this.points[0].y); + + for (var i = 1; i < this.points.length; i++) { + this.graphics.lineTo(this.points[i].x, this.points[i].y); + }; + + for (var i = 1; i < this.points.length; i++) { + this.graphics.beginFill(0xff0022); + this.graphics.drawCircle(this.points[i].x, this.points[i].y, 10); + this.graphics.endFill(); + }; + + } + + } + +} + +module basics { + + export class TilingSprite { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private texture: PIXI.Texture; + + private tilingSprite: PIXI.extras.TilingSprite; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + //create a texture from an image path + this.texture = PIXI.Texture.fromImage('../../_assets/p2.jpeg'); + + /* create a tiling sprite ... + * requires a texture, a width and a height + * in WebGL the image size should preferably be a power of two + */ + this.tilingSprite = new PIXI.extras.TilingSprite(this.texture, this.renderer.width, this.renderer.height); + this.stage.addChild(this.tilingSprite); + + this.count = 0; + + this.animate(); + + } + + private animate = (): void => { + + this.count += 0.005; + + this.tilingSprite.tileScale.x = 2 + Math.sin(this.count); + this.tilingSprite.tileScale.y = 2 + Math.cos(this.count); + + this.tilingSprite.tilePosition.x += 1; + this.tilingSprite.tilePosition.y += 1; + + // render the root container + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +module basics { + + export class Video { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private texture: PIXI.Texture; + + private videoSprite: PIXI.Sprite; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + //create a video texture from a path + this.texture = PIXI.Texture.fromVideo('../../_assets/testVideo.mp4'); + + //create a new sprite using the video texture (yes it's that easy) + this.videoSprite = new PIXI.Sprite(this.texture); + this.videoSprite.width = this.renderer.width; + this.videoSprite.height = this.renderer.height; + this.stage.addChild(this.videoSprite); + + this.stage.addChild(this.videoSprite); + + this.animate(); + + } + + private animate = (): void => { + + //render the stage + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +module demos { + + export class AlphaMask { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private background: PIXI.Container; + + private cells: PIXI.Sprite; + + private mask: PIXI.Sprite; + + private target: PIXI.Point; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; + + this.background = PIXI.Sprite.fromImage('../../_assets/bkg.jpg'); + this.stage.addChild(this.background); + + this.cells = PIXI.Sprite.fromImage('../../_assets/cells.png'); + this.cells.scale.set(1.5, 1.5); + + this.mask = PIXI.Sprite.fromImage('../../_assets/flowerTop.png'); + this.mask.anchor.set(0.5); + this.mask.position.x = 310; + this.mask.position.y = 190; + + this.cells.mask = this.mask; + + this.stage.addChild(this.mask); + + this.stage.addChild(this.cells); + + this.target = new PIXI.Point(); + + this.reset(); + + this.animate(); + + } + + private reset(): void { + + this.target.x = Math.floor(Math.random() * 550); + this.target.y = Math.floor(Math.random() * 300); + + } + + private animate = (): void => { + + this.mask.position.x += (this.target.x - this.mask.x) * 0.1; + this.mask.position.y += (this.target.y - this.mask.y) * 0.1; + + if (Math.abs(this.mask.x - this.target.x) < 1) { + this.reset(); + } + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +module demos { + + export class Batch { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private sprites: PIXI.ParticleContainer; + + private maggots: BatchDude[]; + + private tick: number; + + private dudeBounds: PIXI.Rectangle; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.sprites = new PIXI.ParticleContainer(10000, { + + scale: true, + position: true, + rotation: true, + uvs: true, + alpha: true + + }); + this.stage.addChild(this.sprites); + + // create an array to store all the sprites + this.maggots = []; + + var totalSprites = this.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100; + + for (var i = 0; i < totalSprites; i++) { + + // create a new Sprite + var dude = new BatchDude(PIXI.Texture.fromImage('../../_assets/tinyMaggot.png')); + + dude.tint = Math.random() * 0xE8D4CD; + + // set the anchor point so the texture is centerd on the sprite + dude.anchor.set(0.5); + + // different maggots, different sizes + dude.scale.set(0.8 + Math.random() * 0.3); + + // scatter them all + dude.x = Math.random() * this.renderer.width; + dude.y = Math.random() * this.renderer.height; + + dude.tint = Math.random() * 0x808080; + + // create a random direction in radians + dude.direction = Math.random() * Math.PI * 2; + + // this number will be used to modify the direction of the sprite over time + dude.turningSpeed = Math.random() - 0.8; + + // create a random speed between 0 - 2, and these maggots are slooww + dude.speed = (2 + Math.random() * 2) * 0.2; + + dude.offset = Math.random() * 100; + + // finally we push the dude into the maggots array so it it can be easily accessed later + this.maggots.push(dude); + + this.sprites.addChild(dude); + + } + + // create a bounding box box for the little maggots + var dudeBoundsPadding = 100; + this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding, + -dudeBoundsPadding, + this.renderer.width + dudeBoundsPadding * 2, + this.renderer.height + dudeBoundsPadding * 2); + + this.tick = 0; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // iterate through the sprites and update their position + for (var i = 0; i < this.maggots.length; i++) { + + var dude = this.maggots[i]; + dude.scale.y = 0.95 + Math.sin(this.tick + dude.offset) * 0.05; + dude.direction += dude.turningSpeed * 0.01; + dude.position.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y); + dude.position.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y); + dude.rotation = -dude.direction + Math.PI; + + // wrap the maggots + if (dude.position.x < this.dudeBounds.x) { + dude.position.x += this.dudeBounds.width; + } + else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) { + dude.position.x -= this.dudeBounds.width; + } + + if (dude.position.y < this.dudeBounds.y) { + dude.position.y += this.dudeBounds.height; + } + else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) { + dude.position.y -= this.dudeBounds.height; + } + } + + // increment the ticker + this.tick += 0.1; + + // time to render the stage ! + this.renderer.render(this.stage); + + // request another animation frame... + requestAnimationFrame(this.animate); + + } + + } + + export class BatchDude extends PIXI.Sprite { + + direction: number; + speed: number; + turningSpeed: number; + offset: number; + + constructor(texture: PIXI.Texture) { + + super(texture); + + } + + } + +} + +module demos { + + export class BlendModes { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private background: PIXI.Sprite; + + private dudeArray: BlendModesDude[]; + + private totalDudes: number; + + private dudeBounds: PIXI.Rectangle; + + private tick: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // create a new background sprite + this.background = PIXI.Sprite.fromImage('../../_assets/BGrotate.jpg'); + this.stage.addChild(this.background); + + // create an array to store a reference to the dudes + this.dudeArray = []; + + this.totalDudes = 20; + + for (var i = 0; i < this.totalDudes; i++) { + + // create a new Sprite that uses the image name that we just generated as its source + var dude = new BlendModesDude(PIXI.Texture.fromImage('../../_assets/flowerTop.png')); + + dude.anchor.set(0.5); + + // set a random scale for the dude + dude.scale.set(0.8 + Math.random() * 0.3); + + // finally let's set the dude to be at a random position... + dude.position.x = Math.floor(Math.random() * this.renderer.width); + dude.position.y = Math.floor(Math.random() * this.renderer.height); + + // The important bit of this example, this is how you change the default blend mode of the sprite + dude.blendMode = PIXI.BLEND_MODES.ADD; + + // create some extra properties that will control movement + dude.direction = Math.random() * Math.PI * 2; + + // this number will be used to modify the direction of the dude over time + dude.turningSpeed = Math.random() - 0.8; + + // create a random speed for the dude between 0 - 2 + dude.speed = 2 + Math.random() * 2; + + // finally we push the dude into the dudeArray so it it can be easily accessed later + this.dudeArray.push(dude); + + this.stage.addChild(dude); + + } + + // create a bounding box box for the little maggots + var dudeBoundsPadding = 100; + this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding, + -dudeBoundsPadding, + this.renderer.width + dudeBoundsPadding * 2, + this.renderer.height + dudeBoundsPadding * 2); + + this.tick = 0; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // iterate through the dudes and update the positions + for (var i = 0; i < this.dudeArray.length; i++) { + + var dude = this.dudeArray[i]; + dude.direction += dude.turningSpeed * 0.01; + dude.position.x += Math.sin(dude.direction) * dude.speed; + dude.position.y += Math.cos(dude.direction) * dude.speed; + dude.rotation = -dude.direction - Math.PI / 2; + + // wrap the dudes by testing their bounds... + if (dude.position.x < this.dudeBounds.x) { + dude.position.x += this.dudeBounds.width; + } + else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) { + dude.position.x -= this.dudeBounds.width; + } + + if (dude.position.y < this.dudeBounds.y) { + dude.position.y += this.dudeBounds.height; + } + else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) { + dude.position.y -= this.dudeBounds.height; + } + } + + // increment the ticker + this.tick += 0.1; + + // time to render the stage ! + this.renderer.render(this.stage); + + // request another animation frame... + requestAnimationFrame(this.animate); + + } + + } + + export class BlendModesDude extends PIXI.Sprite { + + direction: number; + speed: number; + turningSpeed: number; + offset: number; + + constructor(texture: PIXI.Texture) { + + super(texture); + + } + + } + +} + +module demos { + + export class CacheAsBitmap { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private aliens: PIXI.Sprite[]; + + private alienContainer: PIXI.Container; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // load resources + PIXI.loader + .add('spritesheet', '../../_assets/monsters.json') + .load(this.onAssetsLoaded); + + // holder to store aliens + this.aliens = []; + + this.count = 0; + + // create an empty container + this.alienContainer = new PIXI.Container(); + this.alienContainer.position.x = 400; + this.alienContainer.position.y = 300; + + // make the stage interactive + this.stage.interactive = true; + + this.stage.addChild(this.alienContainer); + + this.stage.on('click', this.onClick); + this.stage.on('tap', this.onClick); + + } + + private onClick = (event: PIXI.interaction.InteractionEvent): void => { + + this.alienContainer.cacheAsBitmap = !this.alienContainer.cacheAsBitmap; + + //feel free to play with what's below + //var sprite = new PIXI.Sprite(this.alienContainer.generateTexture()); + //this.stage.addChild(sprite); + //sprite.position.x = Math.random() * 800; + //sprite.position.y = Math.random() * 600; + + } + + private onAssetsLoaded = (): void => { + + // add a bunch of aliens with textures from image paths + + var alienFrames = ['eggHead.png', 'flowerTop.png', 'helmlok.png', 'skully.png']; + + for (var i = 0; i < 100; i++) { + + var frameName = alienFrames[i % 4]; + + // create an alien using the frame name.. + var alien = PIXI.Sprite.fromFrame(frameName); + alien.tint = Math.random() * 0xFFFFFF; + + /* + * fun fact for the day :) + * another way of doing the above would be + * var texture = PIXI.Texture.fromFrame(frameName); + * var alien = new PIXI.Sprite(texture); + */ + alien.position.x = Math.random() * 800 - 400; + alien.position.y = Math.random() * 600 - 300; + alien.anchor.x = 0.5; + alien.anchor.y = 0.5; + this.aliens.push(alien); + this.alienContainer.addChild(alien); + + } + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // let's rotate the aliens a little bit + for (var i = 0; i < 100; i++) { + var alien = this.aliens[i]; + alien.rotation += 0.1; + } + + this.count += 0.01; + + this.alienContainer.scale.x = Math.sin(this.count); + this.alienContainer.scale.y = Math.sin(this.count); + + this.alienContainer.rotation += 0.01; + + // render the stage + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +module demos { + + export class DraggableBunny extends PIXI.Sprite { + + //todo I dont know what event.data is at this time + private data: any; + + private dragging: boolean; + + constructor(texture?: PIXI.Texture) { + + super(texture); + + // enable the bunny to be interactive... this will allow it to respond to mouse and touch events + this.interactive = true; + + // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse + this.buttonMode = true; + + // center the bunny's anchor point + this.anchor.set(0.5); + + // make it a bit bigger, so it's easier to grab + this.scale.set(3); + + // setup events + this + // events for drag start + .on('mousedown', this.onDragStart) + .on('touchstart', this.onDragStart) + // events for drag end + .on('mouseup', this.onDragEnd) + .on('mouseupoutside', this.onDragEnd) + .on('touchend', this.onDragEnd) + .on('touchendoutside', this.onDragEnd) + // events for drag move + .on('mousemove', this.onDragMove) + .on('touchmove', this.onDragMove); + + } + + private onDragStart = (event: PIXI.interaction.InteractionEvent): void => { + + // store a reference to the data + // the reason for this is because of multitouch + // we want to track the movement of this particular touch + this.data = event.data; + this.alpha = 0.5; + this.dragging = true; + + } + + private onDragEnd = (event: PIXI.interaction.InteractionEvent): void => { + + //set interactiondata to null + this.data = null; + this.alpha = 1; + this.dragging = false; + + } + + private onDragMove = (event: PIXI.interaction.InteractionEvent): void => { + + if (this.dragging) { + var newPosition = this.data.getLocalPosition(this.parent); + this.position.x = newPosition.x; + this.position.y = newPosition.y; + } + + } + + } + + export class Dragging { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private texture: PIXI.Texture; + + private data: PIXI.interaction.InteractionData; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + //create a texture from an image + this.texture = PIXI.Texture.fromImage('../../_assets/bunny.png'); + + for (var i = 0; i < 10; i++) { + this.createBunny(Math.floor(Math.random() * 800), Math.floor(Math.random() * 600)); + } + + // start animating + this.animate(); + + } + + private createBunny(x: number, y: number): void { + + // create our little bunny friend.. + var bunny = new DraggableBunny(this.texture); + + // move the sprite to its designated position + bunny.position.x = x; + bunny.position.y = y; + + // add it to the stage + this.stage.addChild(bunny); + + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + +} + +module demos { + + export class GraphicsDemo { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private thing: PIXI.Graphics; + + private graphics: PIXI.Graphics; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; + + this.graphics = new PIXI.Graphics(); + + // set a fill and line style + this.graphics.beginFill(0xFF3300); + this.graphics.lineStyle(10, 0xffd900, 1); + + // draw a shape + this.graphics.moveTo(50, 50); + this.graphics.lineTo(250, 50); + this.graphics.lineTo(100, 100); + this.graphics.lineTo(250, 220); + this.graphics.lineTo(50, 220); + this.graphics.lineTo(50, 50); + this.graphics.endFill(); + + // set a fill and line style again + this.graphics.lineStyle(10, 0xFF0000, 0.8); + this.graphics.beginFill(0xFF700B, 1); + + // draw a second shape + this.graphics.moveTo(210, 300); + this.graphics.lineTo(450, 320); + this.graphics.lineTo(570, 350); + this.graphics.quadraticCurveTo(600, 0, 480, 100); + this.graphics.lineTo(330, 120); + this.graphics.lineTo(410, 200); + this.graphics.lineTo(210, 300); + this.graphics.endFill(); + + // draw a rectangle + this.graphics.lineStyle(2, 0x0000FF, 1); + this.graphics.drawRect(50, 250, 100, 100); + + // draw a circle + this.graphics.lineStyle(0); + this.graphics.beginFill(0xFFFF0B, 0.5); + this.graphics.drawCircle(470, 200, 100); + this.graphics.endFill(); + + this.graphics.lineStyle(20, 0x33FF00); + this.graphics.moveTo(30, 30); + this.graphics.lineTo(600, 300); + + this.stage.addChild(this.graphics); + + // let's create a moving shape + this.thing = new PIXI.Graphics(); + this.stage.addChild(this.thing); + this.thing.position.x = 620 / 2; + this.thing.position.y = 380 / 2; + + this.count = 0; + + // Just click on the stage to draw random lines + this.stage.on('click', this.onClick); + this.stage.on('tap', this.onClick); + + // start animating + this.animate(); + + } + + private onClick = (event: PIXI.interaction.InteractionEvent): void => { + + this.graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1); + this.graphics.moveTo(Math.random() * 620, Math.random() * 380); + this.graphics.bezierCurveTo(Math.random() * 620, Math.random() * 380, + Math.random() * 620, Math.random() * 380, + Math.random() * 620, Math.random() * 380); + } + + private animate = (): void => { + + this.thing.clear(); + + this.count += 0.1; + + this.thing.clear(); + this.thing.lineStyle(10, 0xff0000, 1); + this.thing.beginFill(0xffFF00, 0.5); + + this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); + this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20); + this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20); + this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20); + this.thing.lineTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); + + this.thing.rotation = this.count * 0.1; + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + } + + } + +} + +module demos { + + export class Interactivity { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private background: PIXI.Sprite; + + private buttons: InteractivityButton[]; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // create a background... + this.background = PIXI.Sprite.fromImage('../../_assets/button_test_BG.jpg'); + this.background.width = this.renderer.width; + this.background.height = this.renderer.height; + + // add background to stage... + this.stage.addChild(this.background); + + this.buttons = []; + + var buttonPositions = [ + 175, 75, + 655, 75, + 410, 325, + 150, 465, + 685, 445 + ]; + + function noop(): void { + console.log('click'); + } + + // create some textures from an image path + var textureButton = PIXI.Texture.fromImage('../../_assets/button.png'); + var textureButtonDown = PIXI.Texture.fromImage('../../_assets/buttonDown.png'); + var textureButtonOver = PIXI.Texture.fromImage('../../_assets/buttonOver.png'); + + for (var i = 0; i < 5; i++) { + + var button = new InteractivityButton(textureButton, textureButtonDown, textureButtonOver); + + button.position.x = buttonPositions[i * 2]; + button.position.y = buttonPositions[i * 2 + 1]; + + button.tap = noop; + button.click = noop; + + // add it to the stage + this.stage.addChild(button); + + // add button to array + this.buttons.push(button); + + } + + // set some silly values... + this.buttons[0].scale.set(1.2); + + this.buttons[2].rotation = Math.PI / 10; + + this.buttons[3].scale.set(0.8); + + this.buttons[4].scale.set(0.8, 1.2); + this.buttons[4].rotation = Math.PI; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + + export class InteractivityButton extends PIXI.Sprite { + + private textureButton: PIXI.Texture; + private textureButtonDown: PIXI.Texture; + private textureButtonOver: PIXI.Texture; + + tap: Function; + click: Function; + + isdown: boolean; + isOver: boolean; + + constructor(textureButton: PIXI.Texture, textureButtonDown: PIXI.Texture, textureButtonOver: PIXI.Texture) { + + super(textureButton); + + // create some textures from an image path + this.textureButton = textureButton; + this.textureButtonDown = textureButtonDown; + this.textureButtonOver = textureButtonOver; + + this.buttonMode = true; + this.anchor.set(0.5); + + // make the button interactive... + this.interactive = true; + + this + // set the mousedown and touchstart callback... + .on('mousedown', this.onButtonDown) + .on('touchstart', this.onButtonDown) + + // set the mouseup and touchend callback... + .on('mouseup', this.onButtonUp) + .on('touchend', this.onButtonUp) + .on('mouseupoutside', this.onButtonUp) + .on('touchendoutside', this.onButtonUp) + + // set the mouseover callback... + .on('mouseover', this.onButtonOver) + + // set the mouseout callback... + .on('mouseout', this.onButtonOut) + + // you can also listen to click and tap events : + //.on('click', this.noop) + + } + + private onButtonDown = (event: PIXI.interaction.InteractionEvent): void => { + + this.isdown = true; + this.texture = this.textureButtonDown; + this.alpha = 1; + + } + + private onButtonUp = (event: PIXI.interaction.InteractionEvent): void => { + + this.isdown = false; + + if (this.isOver) { + this.texture = this.textureButtonOver; + } + else { + this.texture = this.textureButton; + } + } + + private onButtonOver = (event: PIXI.interaction.InteractionEvent): void => { + + this.isOver = true; + + if (this.isdown) { + return; + } + + this.texture = this.textureButtonOver; + + } + + private onButtonOut = (event: PIXI.interaction.InteractionEvent): void => { + + this.isOver = false; + + if (this.isdown) { + return; + } + + this.texture = this.textureButton; + } + + } + +} + +module demos { + + export class Masking { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private bg: PIXI.Sprite; + + private container: PIXI.Container; + + private bgFront: PIXI.Sprite; + + private light1: PIXI.Sprite; + + private light2: PIXI.Sprite; + + private panda: PIXI.Sprite; + + private thing: PIXI.Graphics; + + private count: number; + + private help: PIXI.Text; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb, antialias: true }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; + + this.bg = PIXI.Sprite.fromImage('../../_assets/BGrotate.jpg'); + this.bg.anchor.x = 0.5; + this.bg.anchor.y = 0.5; + + this.bg.position.x = this.renderer.width / 2; + this.bg.position.y = this.renderer.height / 2; + + this.stage.addChild(this.bg); + + this.container = new PIXI.Container(); + this.container.position.x = this.renderer.width / 2; + this.container.position.y = this.renderer.height / 2; + + // add a bunch of sprites + + this.bgFront = PIXI.Sprite.fromImage('../../_assets/SceneRotate.jpg'); + this.bgFront.anchor.x = 0.5; + this.bgFront.anchor.y = 0.5; + + this.container.addChild(this.bgFront); + + this.light2 = PIXI.Sprite.fromImage('../../_assets/LightRotate2.png'); + this.light2.anchor.x = 0.5; + this.light2.anchor.y = 0.5; + this.container.addChild(this.light2); + + this.light1 = PIXI.Sprite.fromImage('../../_assets/LightRotate1.png'); + this.light1.anchor.x = 0.5; + this.light1.anchor.y = 0.5; + this.container.addChild(this.light1); + + this.panda = PIXI.Sprite.fromImage('../../_assets/panda.png'); + this.panda.anchor.x = 0.5; + this.panda.anchor.y = 0.5; + + this.container.addChild(this.panda); + + this.stage.addChild(this.container); + + // let's create a moving shape + this.thing = new PIXI.Graphics(); + this.stage.addChild(this.thing); + this.thing.position.x = this.renderer.width / 2; + this.thing.position.y = this.renderer.height / 2; + this.thing.lineStyle(0); + + this.container.mask = this.thing; + + this.count = 0; + + this.stage.on('click', this.onClick); + this.stage.on('tap', this.onClick); + + this.help = new PIXI.Text('Click to turn masking on / off.', { font: 'bold 12pt Arial', fill: 'white' }); + this.help.position.y = this.renderer.height - 26; + this.help.position.x = 10; + this.stage.addChild(this.help); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + this.bg.rotation += 0.01; + this.bgFront.rotation -= 0.01; + + this.light1.rotation += 0.02; + this.light2.rotation += 0.01; + + this.panda.scale.x = 1 + Math.sin(this.count) * 0.04; + this.panda.scale.y = 1 + Math.cos(this.count) * 0.04; + + this.count += 0.1; + + this.thing.clear(); + + this.thing.beginFill(0x8bc5ff, 0.4); + this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); + this.thing.lineTo(-320 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20); + this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20); + this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20); + this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20); + this.thing.lineTo(-120 + Math.sin(this.count) * 20, -300 + Math.cos(this.count) * 20); + this.thing.lineTo(-320 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20); + this.thing.rotation = this.count * 0.1; + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + private onClick = (event: PIXI.interaction.InteractionEvent): void => { + + if (!this.container.mask) { + this.container.mask = this.thing; + } + else { + this.container.mask = null; + } + } + + } + +} + +module demos { + + export class MovieClipDemo { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + PIXI.loader + .add('spritesheet', '../../_assets/mc.json') + .load(this.onAssetsLoaded); + + // start animating + this.animate(); + + } + + private onAssetsLoaded = (loader: PIXI.loaders.Loader): void => { + + // create an array to store the textures + var explosionTextures: PIXI.Texture[] = []; + var i: number; + + for (i = 0; i < 26; i++) { + + var texture = PIXI.Texture.fromFrame('Explosion_Sequence_A ' + (i + 1) + '.png'); + explosionTextures.push(texture); + + } + + for (i = 0; i < 50; i++) { + + // create an explosion MovieClip + var explosion = new PIXI.extras.MovieClip(explosionTextures); + + explosion.position.x = Math.random() * 800; + explosion.position.y = Math.random() * 600; + explosion.anchor.x = 0.5; + explosion.anchor.y = 0.5; + + explosion.rotation = Math.random() * Math.PI; + + explosion.scale.set(0.75 + Math.random() * 0.5); + + explosion.gotoAndPlay(Math.random() * 27); + + this.stage.addChild(explosion); + + } + + // start animating + this.animate(); + } + + private animate = (): void => { + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + +} + +module demos { + + export class RenderTextureDemo { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private renderTexture: PIXI.RenderTexture; + private renderTexture2: PIXI.RenderTexture; + private currentTexture: PIXI.RenderTexture; + + private outputSprite: PIXI.Sprite; + private stuffContainer: PIXI.Container; + private items: PIXI.Sprite[]; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // create two render textures... these dynamic textures will be used to draw the scene into itself + this.renderTexture = new PIXI.RenderTexture(this.renderer, this.renderer.width, this.renderer.height); + this.renderTexture2 = new PIXI.RenderTexture(this.renderer, this.renderer.width, this.renderer.height); + this.currentTexture = this.renderTexture; + + // create a new sprite that uses the render texture we created above + this.outputSprite = new PIXI.Sprite(this.currentTexture); + + // align the sprite + this.outputSprite.position.x = 400; + this.outputSprite.position.y = 300; + this.outputSprite.anchor.set(0.5); + + // add to stage + this.stage.addChild(this.outputSprite); + + this.stuffContainer = new PIXI.Container(); + + this.stuffContainer.position.x = 400; + this.stuffContainer.position.y = 300; + + this.stage.addChild(this.stuffContainer); + + // create an array of image ids.. + var fruits = [ + '../../_assets/spinObj_01.png', + '../../_assets/spinObj_02.png', + '../../_assets/spinObj_03.png', + '../../_assets/spinObj_04.png', + '../../_assets/spinObj_05.png', + '../../_assets/spinObj_06.png', + '../../_assets/spinObj_07.png', + '../../_assets/spinObj_08.png' + ]; + + // create an array of items + this.items = []; + + // now create some items and randomly position them in the stuff container + for (var i = 0; i < 20; i++) { + + var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]); + item.position.x = Math.random() * 400 - 200; + item.position.y = Math.random() * 400 - 200; + + item.anchor.set(0.5); + + this.stuffContainer.addChild(item); + + this.items.push(item); + + } + + // used for spinning! + this.count = 0; + + // start animating + this.animate(); + + } + + private animate = (): void => { + + for (var i = 0; i < this.items.length; i++) { + // rotate each item + var item = this.items[i]; + item.rotation += 0.1; + } + + this.count += 0.01; + + // swap the buffers ... + var temp = this.renderTexture; + this.renderTexture = this.renderTexture2; + this.renderTexture2 = temp; + + // set the new texture + this.outputSprite.texture = this.renderTexture; + + // twist this up! + this.stuffContainer.rotation -= 0.01; + this.outputSprite.scale.set(1 + Math.sin(this.count) * 0.2); + + // render the stage to the texture + // the 'true' clears the texture before the content is rendered + this.renderTexture2.render(this.stage, null, false); + + // and finally render the stage + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +module demos { + + export class StripDemo { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private count: number; + + private points: PIXI.Point[]; + + private strip: PIXI.mesh.Rope; + + private snakeContainer: PIXI.Container; + + private ropeLength: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.count = 0; + + // build a rope! + this.ropeLength = 918 / 20; + + this.points = []; + + for (var i = 0; i < 20; i++) { + this.points.push(new PIXI.Point(i * this.ropeLength, 0)); + } + + this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('../../_assets/snake.png'), this.points); + this.strip.x = -459; + + this.snakeContainer = new PIXI.Container(); + this.snakeContainer.position.x = 400; + this.snakeContainer.position.y = 300; + + this.snakeContainer.scale.set(800 / 1100); + this.stage.addChild(this.snakeContainer); + + this.snakeContainer.addChild(this.strip); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + this.count += 0.1; + + // make the snake + for (var i = 0; i < this.points.length; i++) { + + this.points[i].y = Math.sin((i * 0.5) + this.count) * 30; + + this.points[i].x = i * this.ropeLength + Math.cos((i * 0.3) + this.count) * 20; + + } + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +module demos { + + export class TextDemo { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private bitmapFontText: PIXI.extras.BitmapText; + + private background: PIXI.Sprite; + + private textSample: PIXI.Text; + + private spinningText: PIXI.Text; + + private countingText: PIXI.Text; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + PIXI.loader + .add('desyrel', '../../_assets/desyrel.xml') + .load(this.onAssetsLoaded); + + // start animating + this.animate(); + + } + + private onAssetsLoaded = (): void => { + + this.bitmapFontText = new PIXI.extras.BitmapText('bitmap fonts are\n now supported!', { font: '35px Desyrel', align: 'right' }); + + this.bitmapFontText.position.x = 600 - this.bitmapFontText.textWidth; + this.bitmapFontText.position.y = 20; + + this.stage.addChild(this.bitmapFontText); + + // add a shiny background... + this.background = PIXI.Sprite.fromImage('../../_assets/textDemoBG.jpg'); + this.stage.addChild(this.background); + + // create some white text using the Snippet webfont + this.textSample = new PIXI.Text('Pixi.js can has\n multiline text!', { font: '35px Snippet', fill: 'white', align: 'left' }); + this.textSample.position.set(20); + + // create a text object with a nice stroke + this.spinningText = new PIXI.Text('I\'m fun!', { font: 'bold 60px Arial', fill: '#cc00ff', align: 'center', stroke: '#FFFFFF', strokeThickness: 6 }); + + // setting the anchor point to 0.5 will center align the text... great for spinning! + this.spinningText.anchor.set(0.5); + this.spinningText.position.x = 310; + this.spinningText.position.y = 200; + + // create a text object that will be updated... + this.countingText = new PIXI.Text('COUNT 4EVAR: 0', { font: 'bold italic 60px Arvo', fill: '#3e1707', align: 'center', stroke: '#a4410e', strokeThickness: 7 }); + + this.countingText.position.x = 310; + this.countingText.position.y = 320; + this.countingText.anchor.x = 0.5; + + this.stage.addChild(this.textSample); + this.stage.addChild(this.spinningText); + this.stage.addChild(this.countingText); + + this.count = 0; + + } + + private animate = (): void => { + + + this.renderer.render(this.stage); + + this.count += 0.05; + + // update the text with a new string + this.countingText.text = 'COUNT 4EVAR: ' + Math.floor(this.count); + + // let's spin the spinning text + this.spinningText.rotation += 0.03; + + requestAnimationFrame(this.animate); + } + + } + +} + +module demos { + + export class TextureSwap { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private bol: boolean; + + private texture: PIXI.Texture; + private secondTexture: PIXI.Texture; + + private dude: PIXI.Sprite; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.bol = false; + + //an image path + this.texture = PIXI.Texture.fromImage('../../_assets/flowerTop.png'); + + // create a second texture + this.secondTexture = PIXI.Texture.fromImage('../../_assets/eggHead.png'); + + // create a new Sprite using the texture + this.dude = new PIXI.Sprite(this.texture); + + // center the sprites anchor point + this.dude.anchor.set(0.5); + + // move the sprite to the center of the screen + this.dude.position.x = this.renderer.width / 2; + this.dude.position.y = this.renderer.height / 2; + + this.stage.addChild(this.dude); + + // make the sprite interactive + this.dude.interactive = true; + + this.dude.on('click', (): void => { + this.bol = !this.bol; + + if (this.bol) { + this.dude.texture = this.secondTexture; + } + else { + this.dude.texture = this.texture; + } + }); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // just for fun, let's rotate mr rabbit a little + this.dude.rotation += 0.1; + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +module demos { + + export class Tinting { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private totalDudes: number = 10; + private aliens: TintingDude[]; + + private dudeBounds: PIXI.Rectangle; + + private tick: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // holder to store the aliens + this.aliens = []; + + this.tick = 0; + + for (var i = 0; i < this.totalDudes; i++) { + + // create a new Sprite that uses the image name that we just generated as its source + var dude = new TintingDude(); + + // set the anchor point so the texture is centerd on the sprite + dude.anchor.set(0.5); + + // set a random scale for the dude - no point them all being the same size! + dude.scale.set(0.8 + Math.random() * 0.3); + + // finally lets set the dude to be at a random position.. + dude.position.x = Math.random() * this.renderer.width; + dude.position.y = Math.random() * this.renderer.height; + + dude.tint = Math.random() * 0xFFFFFF; + + // create some extra properties that will control movement : + // create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees + dude.direction = Math.random() * Math.PI * 2; + + // this number will be used to modify the direction of the dude over time + dude.turningSpeed = Math.random() - 0.8; + + // create a random speed for the dude between 0 - 2 + dude.speed = 2 + Math.random() * 2; + + // finally we push the dude into the aliens array so it it can be easily accessed later + this.aliens.push(dude); + + this.stage.addChild(dude); + + } + + // create a bounding box for the little dudes + var dudeBoundsPadding = 100; + this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding, + -dudeBoundsPadding, + this.renderer.width + dudeBoundsPadding * 2, + this.renderer.height + dudeBoundsPadding * 2); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // iterate through the dudes and update their position + for (var i = 0; i < this.aliens.length; i++) { + + var dude = this.aliens[i]; + dude.direction += dude.turningSpeed * 0.01; + dude.position.x += Math.sin(dude.direction) * dude.speed; + dude.position.y += Math.cos(dude.direction) * dude.speed; + dude.rotation = -dude.direction - Math.PI / 2; + + // wrap the dudes by testing their bounds... + if (dude.position.x < this.dudeBounds.x) { + dude.position.x += this.dudeBounds.width; + } + else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) { + dude.position.x -= this.dudeBounds.width; + } + + if (dude.position.y < this.dudeBounds.y) { + dude.position.y += this.dudeBounds.height; + } + else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) { + dude.position.y -= this.dudeBounds.height; + } + + } + + // increment the ticker + this.tick += 0.1; + + requestAnimationFrame(this.animate); + + this.renderer.render(this.stage); + + } + + } + + export class TintingDude extends PIXI.Sprite { + + direction: number; + speed: number; + turningSpeed: number; + + constructor() { + super(PIXI.Texture.fromImage('../../_assets/eggHead.png')); + } + + } + +} + +module demos { + + export class TransparentBackground { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private bunny: PIXI.Sprite; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb, transparent: true }); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + // create a new Sprite from an image path. + this.bunny = PIXI.Sprite.fromImage('../../_assets/bunny.png'); + + // center the sprite's anchor point + this.bunny.anchor.set(0.5); + + // move the sprite to the center of the screen + this.bunny.position.x = 200; + this.bunny.position.y = 150; + + this.stage.addChild(this.bunny); + + // start animating + this.animate(); + + } + + private animate = (): void => { + + // just for fun, let's rotate mr rabbit a little + this.bunny.rotation += 0.1; + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +module filters { + + export class Blur { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private bg: PIXI.Sprite; + + private littleDudes: PIXI.Sprite; + private littleRobot: PIXI.Sprite; + + private blurFilter1: PIXI.filters.BlurFilter; + private blurFilter2: PIXI.filters.BlurFilter; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + + this.bg = PIXI.Sprite.fromImage('../../_assets/depth_blur_BG.jpg'); + this.bg.width = this.renderer.width; + this.bg.height = this.renderer.height; + this.stage.addChild(this.bg); + + this.littleDudes = PIXI.Sprite.fromImage('../../_assets/depth_blur_dudes.jpg'); + this.littleDudes.position.x = (this.renderer.width / 2) - 315; + this.littleDudes.position.y = 200; + this.stage.addChild(this.littleDudes); + + this.littleRobot = PIXI.Sprite.fromImage('../../_assets/depth_blur_moby.jpg'); + this.littleRobot.position.x = (this.renderer.width / 2) - 200; + this.littleRobot.position.y = 100; + this.stage.addChild(this.littleRobot); + + this.blurFilter1 = new PIXI.filters.BlurFilter(); + this.blurFilter2 = new PIXI.filters.BlurFilter(); + + this.littleDudes.filters = [this.blurFilter1]; + this.littleRobot.filters = [this.blurFilter2]; + + this.count = 0; + + //nimate + this.animate(); + + } + + private animate = (): void => { + + this.count += 0.005; + + var blurAmount = Math.cos(this.count); + var blurAmount2 = Math.sin(this.count); + + this.blurFilter1.blur = 20 * (blurAmount); + this.blurFilter2.blur = 20 * (blurAmount2); + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} + +module filters { + + export class DisplacementMap { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private container: PIXI.Container; + + private padding: number; + + private bounds: PIXI.Rectangle; + + private maggots: DisplacementMapDude[]; + + private displacementSprite: PIXI.Sprite; + + private displacementFilter: PIXI.filters.DisplacementFilter; + + private ring: PIXI.Sprite; + + private bg: PIXI.Sprite; + + private count: number; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; + + this.container = new PIXI.Container(); + this.stage.addChild(this.container); + + this.padding = 100; + + this.bounds = new PIXI.Rectangle(-this.padding, -this.padding, this.renderer.width + this.padding * 2, this.renderer.height + this.padding * 2); + this.maggots = []; + + for (var i = 0; i < 20; i++) { + + var maggot = new DisplacementMapDude(); + maggot.anchor.set(0.5); + this.container.addChild(maggot); + + maggot.direction = Math.random() * Math.PI * 2; + maggot.speed = 1; + maggot.turnSpeed = Math.random() - 0.8; + + maggot.position.x = Math.random() * this.bounds.width; + maggot.position.y = Math.random() * this.bounds.height; + + maggot.scale.set(1 + Math.random() * 0.3); + maggot.original = maggot.scale.clone(); + this.maggots.push(maggot); + + } + + this.displacementSprite = PIXI.Sprite.fromImage('../../_assets/displace.png'); + this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite); + + this.stage.addChild(this.displacementSprite); + + this.container.filters = [this.displacementFilter]; + + this.displacementFilter.scale.x = 110; + this.displacementFilter.scale.y = 110; + + this.ring = PIXI.Sprite.fromImage('../../_assets/ring.png'); + + this.ring.anchor.set(0.5); + + this.ring.visible = false; + + this.stage.addChild(this.ring); + + this.bg = PIXI.Sprite.fromImage('../../_assets/bkg-grass.jpg'); + this.bg.width = this.renderer.width; + this.bg.height = this.renderer.height; + + this.bg.alpha = 0.4; + + this.container.addChild(this.bg); + + this.stage + .on('mousemove', this.onPointerMove) + .on('touchmove', this.onPointerMove); + + this.count = 0; + + this.animate(); + + } + + private onPointerMove = (eventData: PIXI.interaction.InteractionEvent): void => { + + this.ring.visible = true; + + this.displacementSprite.x = eventData.data.global.x - 100; + this.displacementSprite.y = eventData.data.global.y - this.displacementSprite.height / 2; + + this.ring.position.x = eventData.data.global.x - 25; + this.ring.position.y = eventData.data.global.y; + + }; + + private animate = (): void => { + + this.count += 0.05; + + for (var i = 0; i < this.maggots.length; i++) { + var maggot = this.maggots[i]; + + maggot.direction += maggot.turnSpeed * 0.01; + maggot.position.x += Math.sin(maggot.direction) * maggot.speed; + maggot.position.y += Math.cos(maggot.direction) * maggot.speed; + + maggot.rotation = -maggot.direction - Math.PI / 2; + + maggot.scale.x = maggot.original.x + Math.sin(this.count) * 0.2; + + // wrap the maggots around as the crawl + if (maggot.position.x < this.bounds.x) { + maggot.position.x += this.bounds.width; + } + else if (maggot.position.x > this.bounds.x + this.bounds.width) { + maggot.position.x -= this.bounds.width; + } + + if (maggot.position.y < this.bounds.y) { + maggot.position.y += this.bounds.height; + } + else if (maggot.position.y > this.bounds.y + this.bounds.height) { + maggot.position.y -= this.bounds.height; + } + } + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + }; + + } + + export class DisplacementMapDude extends PIXI.Sprite { + + direction: number; + speed: number; + turnSpeed: number; + original: PIXI.Point; + + constructor() { + + super(PIXI.Texture.fromImage('../../_assets/maggot.png')); + + } + + } + +} + +module filters { + + export class Filter { + + private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer; + + private stage: PIXI.Container; + + private background: PIXI.Sprite; + + private filter: PIXI.filters.ColorMatrixFilter; + + private container: PIXI.Container; + + private bgFront: PIXI.Sprite; + private light2: PIXI.Sprite; + private light1: PIXI.Sprite; + private panda: PIXI.Sprite; + + private count: number; + private switchy: boolean; + + private help: PIXI.Text; + + constructor() { + + this.renderer = PIXI.autoDetectRenderer(800, 600); + document.body.appendChild(this.renderer.view); + + // create the root of the scene graph + this.stage = new PIXI.Container(); + this.stage.interactive = true; + + // create a texture from an image path + var texture: PIXI.Texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png"); + + this.background = PIXI.Sprite.fromImage('_assets/BGrotate.jpg'); + this.background.anchor.set(0.5); + + this.background.position.x = this.renderer.width / 2; + this.background.position.y = this.renderer.height / 2; + + this.filter = new PIXI.filters.ColorMatrixFilter(); + + this.container = new PIXI.Container(); + this.container.position.x = this.renderer.width / 2; + this.container.position.y = this.renderer.height / 2; + + this.bgFront = PIXI.Sprite.fromImage('../../_assets/SceneRotate.jpg'); + this.bgFront.anchor.set(0.5); + + this.container.addChild(this.bgFront); + + this.light2 = PIXI.Sprite.fromImage('../../_assets/LightRotate2.png'); + this.light2.anchor.set(0.5); + this.container.addChild(this.light2); + + this.light1 = PIXI.Sprite.fromImage('../../_assets/LightRotate1.png'); + this.light1.anchor.set(0.5); + this.container.addChild(this.light1); + + this.panda = PIXI.Sprite.fromImage('../../_assets/panda.png'); + this.panda.anchor.set(0.5); + + this.container.addChild(this.panda); + + this.stage.addChild(this.container); + + this.stage.filters = [this.filter]; + + this.count = 0; + this.switchy = false; + + this.stage.on('click', this.onClick); + this.stage.on('tap', this.onClick); + + + this.help = new PIXI.Text('Click to turn filters on / off.', { font: 'bold 12pt Arial', fill: 'white' }); + this.help.position.y = this.renderer.height - 25; + this.help.position.x = 10; + + this.stage.addChild(this.help); + + //nimate + this.animate(); + + } + + private onClick = (): void => { + + this.switchy = !this.switchy; + + if (!this.switchy) { + this.stage.filters = [this.filter]; + } + else { + this.stage.filters = null; + } + + } + + private animate = (): void => { + + this.background.rotation += 0.01; + this.bgFront.rotation -= 0.01; + + this.light1.rotation += 0.02; + this.light2.rotation += 0.01; + + this.panda.scale.x = 1 + Math.sin(this.count) * 0.04; + this.panda.scale.y = 1 + Math.cos(this.count) * 0.04; + + this.count += 0.1; + + var matrix = this.filter.matrix; + + matrix[1] = Math.sin(this.count) * 3; + matrix[2] = Math.cos(this.count); + matrix[3] = Math.cos(this.count) * 1.5; + matrix[4] = Math.sin(this.count / 3) * 2; + matrix[5] = Math.sin(this.count / 2); + matrix[6] = Math.sin(this.count / 4); + + this.renderer.render(this.stage); + + requestAnimationFrame(this.animate); + + } + + } + +} diff --git a/pixi.js/pixi.js-tests.ts.tscparams b/pixi.js/pixi.js-tests.ts.tscparams deleted file mode 100644 index d3f5a12fa..000000000 --- a/pixi.js/pixi.js-tests.ts.tscparams +++ /dev/null @@ -1 +0,0 @@ - diff --git a/pixi.js/pixi.js.d.ts b/pixi.js/pixi.js.d.ts index 0452e7432..8e83cbf1e 100644 --- a/pixi.js/pixi.js.d.ts +++ b/pixi.js/pixi.js.d.ts @@ -1,601 +1,251 @@ -// Type definitions for PIXI 2.2.8 2015-03-24 +// Type definitions for Pixi.js 3.0.7 // Project: https://github.com/GoodBoyDigital/pixi.js/ // Definitions by: clark-stevenson // Definitions: https://github.com/borisyankov/DefinitelyTyped +declare class PIXI { + + static VERSION: string; + static PI_2: number; + static RAD_TO_DEG: number; + static DEG_TO_RAD: number; + static TARGET_FPMS: number; + static RENDER_TYPE: { + UNKNOWN: number; + WEBGL: number; + CANVAS: number; + }; + static BLEND_MODES: { + NORMAL: number; + ADD: number; + MULTIPLY: number; + SCREEN: number; + OVERLAY: number; + DARKEN: number; + LIGHTEN: number; + COLOR_DODGE: number; + COLOR_BURN: number; + HARD_LIGHT: number; + SOFT_LIGHT: number; + DIFFERENCE: number; + EXCLUSION: number; + HUE: number; + SATURATION: number; + COLOR: number; + LUMINOSITY: number; + + }; + static DRAW_MODES: { + POINTS: number; + LINES: number; + LINE_LOOP: number; + LINE_STRIP: number; + TRIANGLES: number; + TRIANGLE_STRIP: number; + TRIANGLE_FAN: number; + }; + static SCALE_MODES: { + DEFAULT: number; + LINEAR: number; + NEAREST: number; + }; + static RETINA_PREFIX: string; + static RESOLUTION: number; + static FILTER_RESOLUTION: number; + static DEFAULT_RENDER_OPTIONS: { + view: HTMLCanvasElement; + resolution: number; + antialias: boolean; + forceFXAA: boolean; + autoResize: boolean; + transparent: boolean; + backgroundColor: number; + clearBeforeRender: boolean; + preserveDrawingBuffer: boolean; + roundPixels: boolean; + }; + static SHAPES: { + POLY: number; + RECT: number; + CIRC: number; + ELIP: number; + RREC: number; + }; + static SPRITE_BATCH_SIZE: number; + +} + declare module PIXI { - export var WEBGL_RENDERER: number; - export var CANVAS_RENDERER: number; - export var VERSION: string; + export function autoDetectRenderer(width: number, height: number, options?: PIXI.RendererOptions, noWebGL?: boolean): PIXI.WebGLRenderer | PIXI.CanvasRenderer; + export var loader: PIXI.loaders.Loader; - export enum blendModes { + //https://github.com/primus/eventemitter3 + export class EventEmitter { - NORMAL, - ADD, - MULTIPLY, - SCREEN, - OVERLAY, - DARKEN, - LIGHTEN, - COLOR_DODGE, - COLOR_BURN, - HARD_LIGHT, - SOFT_LIGHT, - DIFFERENCE, - EXCLUSION, - HUE, - SATURATION, - COLOR, - LUMINOSITY + listeners(event: string): Function[]; + emit(event: string, ...args: any[]): boolean; + on(event: string, fn: Function, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + removeListener(event: string, fn: Function, once?: boolean): EventEmitter; + removeAllListeners(event: string): EventEmitter; + + off(event: string, fn: Function, once?: boolean): EventEmitter; + addListener(event: string, fn: Function, context?: any): EventEmitter; } - export enum scaleModes { + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////////CORE////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// - DEFAULT, - LINEAR, - NEAREST + //display - } + export class DisplayObject extends EventEmitter implements interaction.InteractiveTarget { - export var defaultRenderOptions: PixiRendererOptions; + //begin extras.cacheAsBitmap see https://github.com/pixijs/pixi-typescript/commit/1207b7f4752d79a088d6a9a465a3ec799906b1db + protected _originalRenderWebGL: WebGLRenderer; + protected _originalRenderCanvas: CanvasRenderer; + protected _originalUpdateTransform: boolean; + protected _originalHitTest: any; + protected _cachedSprite: any; + protected _originalDestroy: any; - export var INTERACTION_REQUENCY: number; - export var AUTO_PREVENT_DEFAULT: boolean; - - export var PI_2: number; - export var RAD_TO_DEG: number; - export var DEG_TO_RAD: number; - - export var RETINA_PREFIX: string; - export var identityMatrix: Matrix; - export var glContexts: WebGLRenderingContext[]; - export var instances: any[]; - - export var BaseTextureCache: { [key: string]: BaseTexture } - export var TextureCache: { [key: string]: Texture } - - export function isPowerOfTwo(width: number, height: number): boolean; - - export function rgb2hex(rgb: number[]): string; - export function hex2rgb(hex: string): number[]; - - export function autoDetectRenderer(width?: number, height?: number, options?: PixiRendererOptions): PixiRenderer; - export function autoDetectRecommendedRenderer(width?: number, height?: number, options?: PixiRendererOptions): PixiRenderer; - - export function canUseNewCanvasBlendModes(): boolean; - export function getNextPowerOfTwo(number: number): number; - - export function AjaxRequest(): XMLHttpRequest; - - export function CompileFragmentShader(gl: WebGLRenderingContext, shaderSrc: string[]): any; - export function CompileProgram(gl: WebGLRenderingContext, vertexSrc: string[], fragmentSrc: string[]): any; - - - export interface IEventCallback { - (e?: IEvent): void - } - - export interface IEvent { - type: string; - content: any; - } - - export interface HitArea { - contains(x: number, y: number): boolean; - } - - export interface IInteractionDataCallback { - (interactionData: InteractionData): void - } - - export interface PixiRenderer { - - autoResize: boolean; - clearBeforeRender: boolean; - height: number; - resolution: number; - transparent: boolean; - type: number; - view: HTMLCanvasElement; - width: number; - - destroy(): void; - render(stage: Stage): void; - resize(width: number, height: number): void; - - } - - export interface PixiRendererOptions { - - autoResize?: boolean; - antialias?: boolean; - clearBeforeRender?: boolean; - preserveDrawingBuffer?: boolean; - resolution?: number; - transparent?: boolean; - view?: HTMLCanvasElement; - - } - - export interface BitmapTextStyle { - - font?: string; - align?: string; - tint?: string; - - } - - export interface TextStyle { - - align?: string; - dropShadow?: boolean; - dropShadowColor?: string; - dropShadowAngle?: number; - dropShadowDistance?: number; - fill?: string; - font?: string; - lineJoin?: string; - stroke?: string; - strokeThickness?: number; - wordWrap?: boolean; - wordWrapWidth?: number; - - } - - export interface Loader { - - load(): void; - - } - - export interface MaskData { - - alpha: number; - worldTransform: number[]; - - } - - export interface RenderSession { - - context: CanvasRenderingContext2D; - maskManager: CanvasMaskManager; - scaleMode: scaleModes; - smoothProperty: string; - roundPixels: boolean; - - } - - export interface ShaderAttribute { - // TODO: Find signature of shader attributes - } - - export interface FilterBlock { - - visible: boolean; - renderable: boolean; - - } - - export class AbstractFilter { - - constructor(fragmentSrc: string[], uniforms: any); - - dirty: boolean; - padding: number; - uniforms: any; - fragmentSrc: string[]; - - apply(frameBuffer: WebGLFramebuffer): void; - syncUniforms(): void; - - } - - export class AlphaMaskFilter extends AbstractFilter { - - constructor(texture: Texture); - - map: Texture; - - onTextureLoaded(): void; - - } - - export class AsciiFilter extends AbstractFilter { - - size: number; - - } - - export class AssetLoader implements Mixin { - - assetURLs: string[]; - crossorigin: boolean; - loadersByType: { [key: string]: Loader }; - - constructor(assetURLs: string[], crossorigin?: boolean); - - listeners(eventName: string): Function[]; - emit(eventName: string, data?: any): boolean; - dispatchEvent(eventName: string, data?: any): boolean; - on(eventName: string, fn: Function): Function; - addEventListener(eventName: string, fn: Function): Function; - once(eventName: string, fn: Function): Function; - off(eventName: string, fn: Function): Function; - removeAllEventListeners(eventName: string): void; - - load(): void; - - - } - - export class AtlasLoader implements Mixin { - - url: string; - baseUrl: string; - crossorigin: boolean; - loaded: boolean; - - constructor(url: string, crossorigin: boolean); - - listeners(eventName: string): Function[]; - emit(eventName: string, data?: any): boolean; - dispatchEvent(eventName: string, data?: any): boolean; - on(eventName: string, fn: Function): Function; - addEventListener(eventName: string, fn: Function): Function; - once(eventName: string, fn: Function): Function; - off(eventName: string, fn: Function): Function; - removeAllEventListeners(eventName: string): void; - - load(): void; - - } - - export class BaseTexture implements Mixin { - - static fromImage(imageUrl: string, crossorigin?: boolean, scaleMode?: scaleModes): BaseTexture; - static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: scaleModes): BaseTexture; - - constructor(source: HTMLImageElement, scaleMode: scaleModes); - constructor(source: HTMLCanvasElement, scaleMode: scaleModes); - - height: number; - hasLoaded: boolean; - mipmap: boolean; - premultipliedAlpha: boolean; - resolution: number; - scaleMode: scaleModes; - source: HTMLImageElement; - width: number; - - listeners(eventName: string): Function[]; - emit(eventName: string, data?: any): boolean; - dispatchEvent(eventName: string, data?: any): boolean; - on(eventName: string, fn: Function): Function; - addEventListener(eventName: string, fn: Function): Function; - once(eventName: string, fn: Function): Function; - off(eventName: string, fn: Function): Function; - removeAllEventListeners(eventName: string): void; - - destroy(): void; - dirty(): void; - updateSourceImage(newSrc: string): void; - unloadFromGPU(): void; - - } - - export class BitmapFontLoader implements Mixin { - - constructor(url: string, crossorigin: boolean); - - baseUrl: string; - crossorigin: boolean; - texture: Texture; - url: string; - - listeners(eventName: string): Function[]; - emit(eventName: string, data?: any): boolean; - dispatchEvent(eventName: string, data?: any): boolean; - on(eventName: string, fn: Function): Function; - addEventListener(eventName: string, fn: Function): Function; - once(eventName: string, fn: Function): Function; - off(eventName: string, fn: Function): Function; - removeAllEventListeners(eventName: string): void; - - load(): void; - - } - - export class BitmapText extends DisplayObjectContainer { - - static fonts: any; - - constructor(text: string, style: BitmapTextStyle); - - dirty: boolean; - fontName: string; - fontSize: number; - maxWidth: number; - textWidth: number; - textHeight: number; - tint: number; - style: BitmapTextStyle; - - setText(text: string): void; - setStyle(style: BitmapTextStyle): void; - - } - - export class BlurFilter extends AbstractFilter { - - blur: number; - blurX: number; - blurY: number; - - } - - export class BlurXFilter extends AbstractFilter { - - blur: number; - - } - - export class BlurYFilter extends AbstractFilter { - - blur: number; - - } - - export class CanvasBuffer { - - constructor(width: number, height: number); - - canvas: HTMLCanvasElement; - context: CanvasRenderingContext2D; - height: number; - width: number; - - clear(): void; - resize(width: number, height: number): void; - - } - - export class CanvasMaskManager { - - pushMask(maskData: MaskData, renderSession: RenderSession): void; - popMask(renderSession: RenderSession): void; - - } - - export class CanvasRenderer implements PixiRenderer { - - constructor(width?: number, height?: number, options?: PixiRendererOptions); - - autoResize: boolean; - clearBeforeRender: boolean; - context: CanvasRenderingContext2D; - count: number; - height: number; - maskManager: CanvasMaskManager; - refresh: boolean; - renderSession: RenderSession; - resolution: number; - transparent: boolean; - type: number; - view: HTMLCanvasElement; - width: number; - - destroy(removeView?: boolean): void; - render(stage: Stage): void; - resize(width: number, height: number): void; - - } - - export class CanvasTinter { - - static getTintedTexture(sprite: Sprite, color: number): HTMLCanvasElement; - static tintWithMultiply(texture: Texture, color: number, canvas: HTMLCanvasElement): void; - static tintWithOverlay(texture: Texture, color: number, canvas: HTMLCanvasElement): void; - static tintWithPerPixel(texture: Texture, color: number, canvas: HTMLCanvasElement): void; - static roundColor(color: number): void; - - static cacheStepsPerColorChannel: number; - static convertTintToImage: boolean; - static canUseMultiply: boolean; - static tintMethod: any; - - } - - export class Circle implements HitArea { - - constructor(x: number, y: number, radius: number); - - x: number; - y: number; - radius: number; - - clone(): Circle; - contains(x: number, y: number): boolean; - getBounds(): Rectangle; - - } - - export class ColorMatrixFilter extends AbstractFilter { - - matrix: Matrix; - - } - - export class ColorStepFilter extends AbstractFilter { - - step: number; - - } - - export class ConvolutionFilter extends AbstractFilter { - - constructor(matrix: number[], width: number, height: number); - - matrix: Matrix; - width: number; - height: number; - - } - - export class CrossHatchFilter extends AbstractFilter { - - blur: number; - - } - - export class DisplacementFilter extends AbstractFilter { - - constructor(texture: Texture); - - map: Texture; - offset: Point; - scale: Point; - - } - - export class DotScreenFilter extends AbstractFilter { - - angle: number; - scale: Point; - - } - - export class DisplayObject { - - alpha: number; - buttonMode: boolean; cacheAsBitmap: boolean; - defaultCursor: string; - filterArea: Rectangle; - filters: AbstractFilter[]; - hitArea: HitArea; - interactive: boolean; - mask: Graphics; - parent: DisplayObjectContainer; - pivot: Point; - position: Point; - renderable: boolean; - rotation: number; - scale: Point; - stage: Stage; - visible: boolean; - worldAlpha: number; - worldVisible: boolean; - x: number; - y: number; - click(e: InteractionData): void; - displayObjectUpdateTransform(): void; - getBounds(matrix?: Matrix): Rectangle; - getLocalBounds(): Rectangle; - generateTexture(resolution: number, scaleMode: scaleModes, renderer: PixiRenderer): RenderTexture; - mousedown(e: InteractionData): void; - mouseout(e: InteractionData): void; - mouseover(e: InteractionData): void; - mouseup(e: InteractionData): void; - mousemove(e: InteractionData): void; - mouseupoutside(e: InteractionData): void; - rightclick(e: InteractionData): void; - rightdown(e: InteractionData): void; - rightup(e: InteractionData): void; - rightupoutside(e: InteractionData): void; - setStageReference(stage: Stage): void; - tap(e: InteractionData): void; - toGlobal(position: Point): Point; - toLocal(position: Point, from: DisplayObject): Point; - touchend(e: InteractionData): void; - touchendoutside(e: InteractionData): void; - touchstart(e: InteractionData): void; - touchmove(e: InteractionData): void; + protected _renderCachedWebGL(renderer: WebGLRenderer): void; + protected _initCachedDisplayObject(renderer: WebGLRenderer): void; + protected _renderCachedCanvas(renderer: CanvasRenderer): void; + protected _initCachedDisplayObjectCanvas(renderer: CanvasRenderer): void; + protected _getCachedBounds(): Rectangle; + protected _destroyCachedDisplayObject(): void; + protected _cacheAsBitmapDestroy(): void; + //end extras.cacheAsBitmap + + protected _sr: number; + protected _cr: number; + protected _bounds: Rectangle; + protected _currentBounds: Rectangle; + protected _mask: Rectangle; + protected _cachedObject: any; + updateTransform(): void; + position: Point; + scale: Point; + pivot: Point; + rotation: number; + renderable: boolean; + alpha: number; + visible: boolean; + parent: Container; + worldAlpha: number; + worldTransform: Matrix; + filterArea: Rectangle; + + x: number; + y: number; + worldVisible: boolean; + mask: Graphics | Sprite; + filters: AbstractFilter[]; + name: string; + + getBounds(matrix?: Matrix): Rectangle; + getLocalBounds(): Rectangle; + toGlobal(position: Point): Point; + toLocal(position: Point, from?: DisplayObject): Point; + generateTexture(renderer: CanvasRenderer | WebGLRenderer, scaleMode: number, resolution: number): Texture; + destroy(): void; + getChildByName(name: string): DisplayObject; + getGlobalPosition(point: Point): Point; + + interactive: boolean; + buttonMode: boolean; + interactiveChildren: boolean; + defaultCursor: string; + hitArea: HitArea; + + on(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: string, fn: Function, context?: any): EventEmitter; + + once(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + } - export class DisplayObjectContainer extends DisplayObject { + export class Container extends DisplayObject { - constructor(); + protected _renderWebGL(renderer: WebGLRenderer): void; + protected _renderCanvas(renderer: CanvasRenderer): void; + + protected onChildrenChange: () => void; children: DisplayObject[]; - height: number; + width: number; + height: number; addChild(child: DisplayObject): DisplayObject; addChildAt(child: DisplayObject, index: number): DisplayObject; - getBounds(): Rectangle; - getChildAt(index: number): DisplayObject; + swapChildren(child: DisplayObject, child2: DisplayObject): void; getChildIndex(child: DisplayObject): number; - getLocalBounds(): Rectangle; + setChildIndex(child: DisplayObject, index: number): void; + getChildAt(index: number): DisplayObject; removeChild(child: DisplayObject): DisplayObject; removeChildAt(index: number): DisplayObject; removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[]; - removeStageReference(): void; - setChildIndex(child: DisplayObject, index: number): void; - swapChildren(child: DisplayObject, child2: DisplayObject): void; + destroy(destroyChildren?: boolean): void; + generateTexture(renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer, resolution?: number, scaleMode?: number): Texture; + + renderWebGL(renderer: WebGLRenderer): void; + renderCanvas(renderer: CanvasRenderer): void; + + once(event: 'added', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + once(event: 'removed', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + on(event: 'added', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: string, fn: Function, context?: any): EventEmitter; + on(event: 'removed', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter; + on(event: string, fn: Function, context?: any): EventEmitter; } - export class Ellipse implements HitArea { - - constructor(x: number, y: number, width: number, height: number); - - x: number; - y: number; - width: number; - height: number; - - clone(): Ellipse; - contains(x: number, y: number): boolean; - getBounds(): Rectangle; - - } - - export class Event { - - constructor(target: any, name: string, data: any); - - target: any; - type: string; - data: any; - timeStamp: number; - - stopPropagation(): void; - preventDefault(): void; - stopImmediatePropagation(): void; - - } - - export class EventTarget { - - static mixin(obj: any): void; - - } - - export class FilterTexture { - - constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: scaleModes); - - fragmentSrc: string[]; - frameBuffer: WebGLFramebuffer; - gl: WebGLRenderingContext; - program: WebGLProgram; - scaleMode: number; - texture: WebGLTexture; - - clear(): void; - resize(width: number, height: number): void; - destroy(): void; - - } + //graphics export class GraphicsData { - constructor(lineWidth?: number, lineColor?: number, lineAlpha?: number, fillColor?: number, fillAlpha?: number, fill?: boolean, shape?: any); + constructor(lineWidth: number, lineColor: number, lineAlpha: number, fillColor: number, fillAlpha: number, fill: boolean, shape: Circle | Rectangle | Ellipse | Polygon); lineWidth: number; lineColor: number; @@ -603,137 +253,75 @@ declare module PIXI { fillColor: number; fillAlpha: number; fill: boolean; - shape: any; + shape: Circle | Rectangle | Ellipse | Polygon; type: number; + clone(): GraphicsData; + + protected _lineTint: number; + protected _fillTint: number; + } + export class Graphics extends Container { - export class Graphics extends DisplayObjectContainer { + protected boundsDirty: boolean; + protected dirty: boolean; + protected glDirty: boolean; - static POLY: number; - static RECT: number; - static CIRC: number; - static ELIP: number; - static RREC: number; - - blendMode: number; - boundsPadding: number; fillAlpha: number; - isMask: boolean; lineWidth: number; lineColor: number; tint: number; - worldAlpha: number; + blendMode: number; + isMask: boolean; + boundsPadding: number; - arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean): Graphics; - arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): Graphics; - beginFill(color?: number, alpha?: number): Graphics; + clone(): Graphics; + lineStyle(lineWidth?: number, color?: number, alpha?: number): Graphics; + moveTo(x: number, y: number): Graphics; + lineTo(x: number, y: number): Graphics; + quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): Graphics; bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): Graphics; - clear(): Graphics; - destroyCachedSprite(): void; - drawCircle(x: number, y: number, radius: number): Graphics; - drawEllipse(x: number, y: number, width: number, height: number): Graphics; - drawPolygon(...path: any[]): Graphics; + arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): Graphics; + arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): Graphics; + beginFill(color: number, alpha?: number): Graphics; + endFill(): Graphics; drawRect(x: number, y: number, width: number, height: number): Graphics; drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): Graphics; - drawShape(shape: Circle): GraphicsData; - drawShape(shape: Rectangle): GraphicsData; - drawShape(shape: Ellipse): GraphicsData; - drawShape(shape: Polygon): GraphicsData; - endFill(): Graphics; - lineStyle(lineWidth?: number, color?: number, alpha?: number): Graphics; - lineTo(x: number, y: number): Graphics; - moveTo(x: number, y: number): Graphics; - quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): Graphics; + drawCircle(x: number, y: number, radius: number): Graphics; + drawEllipse(x: number, y: number, width: number, height: number): Graphics; + drawPolygon(path: number[]| Point[]): Graphics; + clear(): Graphics; + //todo + generateTexture(renderer: WebGLRenderer | CanvasRenderer, resolution?: number, scaleMode?: number): Texture; + getBounds(matrix?: Matrix): Rectangle; + containsPoint(point: Point): boolean; + updateLocalBounds(): void; + drawShape(shape: Circle | Rectangle | Ellipse | Polygon): GraphicsData; } - - export class GrayFilter extends AbstractFilter { - - gray: number; - + export interface GraphicsRenderer extends ObjectRenderer { + //yikes todo + } + export interface WebGLGraphicsData { + //yikes todo! } - export class ImageLoader implements Mixin { + //math - constructor(url: string, crossorigin?: boolean); + export class Point { - texture: Texture; + x: number; + y: number; - listeners(eventName: string): Function[]; - emit(eventName: string, data?: any): boolean; - dispatchEvent(eventName: string, data?: any): boolean; - on(eventName: string, fn: Function): Function; - addEventListener(eventName: string, fn: Function): Function; - once(eventName: string, fn: Function): Function; - off(eventName: string, fn: Function): Function; - removeAllEventListeners(eventName: string): void; + constructor(x?: number, y?: number); - load(): void; - loadFramedSpriteSheet(frameWidth: number, frameHeight: number, textureName: string): void; + clone(): Point; + copy(p: Point): void; + equals(p: Point): boolean; + set(x?: number, y?: number): void; } - - export class InteractionData { - - global: Point; - target: Sprite; - originalEvent: Event; - - getLocalPosition(displayObject: DisplayObject, point?: Point, globalPos?: Point): Point; - - } - - export class InteractionManager { - - currentCursorStyle: string; - last: number; - mouse: InteractionData; - mouseOut: boolean; - mouseoverEnabled: boolean; - onMouseMove: Function; - onMouseDown: Function; - onMouseOut: Function; - onMouseUp: Function; - onTouchStart: Function; - onTouchEnd: Function; - onTouchMove: Function; - pool: InteractionData[]; - resolution: number; - stage: Stage; - touches: { [id: string]: InteractionData }; - - constructor(stage: Stage); - } - - export class InvertFilter extends AbstractFilter { - - invert: number; - - } - - export class JsonLoader implements Mixin { - - constructor(url: string, crossorigin?: boolean); - - baseUrl: string; - crossorigin: boolean; - loaded: boolean; - url: string; - - listeners(eventName: string): Function[]; - emit(eventName: string, data?: any): boolean; - dispatchEvent(eventName: string, data?: any): boolean; - on(eventName: string, fn: Function): Function; - addEventListener(eventName: string, fn: Function): Function; - once(eventName: string, fn: Function): Function; - off(eventName: string, fn: Function): Function; - removeAllEventListeners(eventName: string): void; - - load(): void; - - } - export class Matrix { a: number; @@ -743,175 +331,60 @@ declare module PIXI { tx: number; ty: number; - append(matrix: Matrix): Matrix; - apply(pos: Point, newPos: Point): Point; - applyInverse(pos: Point, newPos: Point): Point; - determineMatrixArrayType(): number[]; - identity(): Matrix; - rotate(angle: number): Matrix; fromArray(array: number[]): void; + toArray(transpose?: boolean, out?: number[]): number[]; + apply(pos: Point, newPos?: Point): Point; + applyInverse(pos: Point, newPos?: Point): Point; translate(x: number, y: number): Matrix; - toArray(transpose: boolean): number[]; scale(x: number, y: number): Matrix; + rotate(angle: number): Matrix; + append(matrix: Matrix): Matrix; + prepend(matrix: Matrix): Matrix; + invert(): Matrix; + identity(): Matrix; + clone(): Matrix; + copy(matrix: Matrix): Matrix; + + static IDENTITY: Matrix; + static TEMP_MATRIX: Matrix; } - export interface Mixin { + export interface HitArea { - listeners(eventName: string): Function[]; - emit(eventName: string, data?: any): boolean; - dispatchEvent(eventName: string, data?: any): boolean; - on(eventName: string, fn: Function): Function; - addEventListener(eventName: string, fn: Function): Function; - once(eventName: string, fn: Function): Function; - off(eventName: string, fn: Function): Function; - removeAllEventListeners(eventName: string): void; + contains(x: number, y: number): boolean; } - export class MovieClip extends Sprite { + export class Circle implements HitArea { - static fromFrames(frames: string[]): MovieClip; - static fromImages(images: HTMLImageElement[]): HTMLImageElement; - - constructor(textures: Texture[]); - - animationSpeed: number; - currentFrame: number; - loop: boolean; - playing: boolean; - textures: Texture[]; - totalFrames: number; - - gotoAndPlay(frameNumber: number): void; - gotoAndStop(frameNumber: number): void; - onComplete(): void; - play(): void; - stop(): void; - - } - - export class NoiseFilter extends AbstractFilter { - - noise: number; - - } - - export class NormalMapFilter extends AbstractFilter { - - map: Texture; - offset: Point; - scale: Point; - - } - - export class PixelateFilter extends AbstractFilter { - - size: number; - - } - - export interface IPixiShader { - - fragmentSrc: string[]; - gl: WebGLRenderingContext; - program: WebGLProgram; - vertexSrc: string[]; - - destroy(): void; - init(): void; - - } - - export class PixiShader implements IPixiShader { - - constructor(gl: WebGLRenderingContext); - - attributes: ShaderAttribute[]; - defaultVertexSrc: string[]; - dirty: boolean; - firstRun: boolean; - textureCount: number; - fragmentSrc: string[]; - gl: WebGLRenderingContext; - program: WebGLProgram; - vertexSrc: string[]; - - initSampler2D(): void; - initUniforms(): void; - syncUniforms(): void; - - destroy(): void; - init(): void; - - } - - export class PixiFastShader implements IPixiShader { - - constructor(gl: WebGLRenderingContext); - - textureCount: number; - fragmentSrc: string[]; - gl: WebGLRenderingContext; - program: WebGLProgram; - vertexSrc: string[]; - - destroy(): void; - init(): void; - - } - - export class PrimitiveShader implements IPixiShader { - - constructor(gl: WebGLRenderingContext); - fragmentSrc: string[]; - gl: WebGLRenderingContext; - program: WebGLProgram; - vertexSrc: string[]; - - destroy(): void; - init(): void; - - } - - export class ComplexPrimitiveShader implements IPixiShader { - - constructor(gl: WebGLRenderingContext); - fragmentSrc: string[]; - gl: WebGLRenderingContext; - program: WebGLProgram; - vertexSrc: string[]; - - destroy(): void; - init(): void; - - } - - export class StripShader implements IPixiShader { - - constructor(gl: WebGLRenderingContext); - fragmentSrc: string[]; - gl: WebGLRenderingContext; - program: WebGLProgram; - vertexSrc: string[]; - - destroy(): void; - init(): void; - - } - - export class Point { - - constructor(x?: number, y?: number); + constructor(x?: number, y?: number, radius?: number); x: number; y: number; + radius: number; + type: number; - clone(): Point; - set(x: number, y: number): void; + clone(): Circle; + contains(x: number, y: number): boolean; + getBounds(): Rectangle; } + export class Ellipse implements HitArea { + constructor(x?: number, y?: number, width?: number, height?: number); + + x: number; + y: number; + width: number; + height: number; + type: number; + + clone(): Ellipse; + contains(x: number, y: number): boolean; + getBounds(): Rectangle; + + } export class Polygon implements HitArea { constructor(points: Point[]); @@ -919,13 +392,15 @@ declare module PIXI { constructor(...points: Point[]); constructor(...points: number[]); - points: any[]; //number[] Point[] + closed: boolean; + points: number[]; + type: number; clone(): Polygon; contains(x: number, y: number): boolean; - } + } export class Rectangle implements HitArea { constructor(x?: number, y?: number, width?: number, height?: number); @@ -934,32 +409,14 @@ declare module PIXI { y: number; width: number; height: number; + type: number; + + static EMPTY: Rectangle; clone(): Rectangle; contains(x: number, y: number): boolean; } - - export class RGBSplitFilter extends AbstractFilter { - - red: Point; - green: Point; - blue: Point; - - } - - export class Rope extends Strip { - - points: Point[]; - vertices: number[]; - - constructor(texture: Texture, points: Point[]); - - refresh(): void; - setTexture(texture: Texture): void; - - } - export class RoundedRectangle implements HitArea { constructor(x?: number, y?: number, width?: number, height?: number, radius?: number); @@ -969,944 +426,1295 @@ declare module PIXI { width: number; height: number; radius: number; + type: number; - clone(): RoundedRectangle; + static EMPTY: Rectangle; + + clone(): Rectangle; contains(x: number, y: number): boolean; } - export class SepiaFilter extends AbstractFilter { + //particles - sepia: number; + export interface ParticleContainerProperties { + scale?: boolean; + position?: boolean; + rotation?: boolean; + uvs?: boolean; + alpha?: boolean; } + export class ParticleContainer extends Container { - export class SmartBlurFilter extends AbstractFilter { + constructor(size?: number, properties?: ParticleContainerProperties, batchSize?: number); - blur: number; + protected _maxSize: number; + protected _batchSize: number; - } - - export class SpineLoader implements Mixin { - - url: string; - crossorigin: boolean; - loaded: boolean; - - constructor(url: string, crossOrigin: boolean); - - listeners(eventName: string): Function[]; - emit(eventName: string, data?: any): boolean; - dispatchEvent(eventName: string, data?: any): boolean; - on(eventName: string, fn: Function): Function; - addEventListener(eventName: string, fn: Function): Function; - once(eventName: string, fn: Function): Function; - off(eventName: string, fn: Function): Function; - removeAllEventListeners(eventName: string): void; - - load(): void; - - } - - export class SpineTextureLoader { - - constructor(basePath: string, crossorigin: boolean); - - load(page: AtlasPage, file: string): void; - unload(texture: BaseTexture): void; - - } - - export class Sprite extends DisplayObjectContainer { - - static fromFrame(frameId: string): Sprite; - static fromImage(url: string, crossorigin?: boolean, scaleMode?: scaleModes): Sprite; - - constructor(texture: Texture); - - anchor: Point; - blendMode: blendModes; - shader: IPixiShader; - texture: Texture; - tint: number; - - setTexture(texture: Texture): void; - - } - - export class SpriteBatch extends DisplayObjectContainer { - - constructor(texture?: Texture); - - ready: boolean; - textureThing: Texture; - - initWebGL(gl: WebGLRenderingContext): void; - - } - - export class SpriteSheetLoader implements Mixin { - - constructor(url: string, crossorigin?: boolean); - - baseUrl: string; - crossorigin: boolean; - frames: any; - texture: Texture; - url: string; - - listeners(eventName: string): Function[]; - emit(eventName: string, data?: any): boolean; - dispatchEvent(eventName: string, data?: any): boolean; - on(eventName: string, fn: Function): Function; - addEventListener(eventName: string, fn: Function): Function; - once(eventName: string, fn: Function): Function; - off(eventName: string, fn: Function): Function; - removeAllEventListeners(eventName: string): void; - - load(): void; - - } - - export class Stage extends DisplayObjectContainer { - - constructor(backgroundColor: number); - - interactionManager: InteractionManager; - - getMousePosition(): Point; - setBackgroundColor(backgroundColor: number): void; - setInteractionDelegate(domElement: HTMLElement): void; - - } - - export class Strip extends DisplayObjectContainer { - - static DrawModes: { - - TRIANGLE_STRIP: number; - TRIANGLES: number; - - } - - constructor(texture: Texture); + protected onChildrenChange: () => void; + interactiveChildren: boolean; blendMode: number; - colors: number[]; - dirty: boolean; - indices: number[]; - canvasPadding: number; - texture: Texture; - uvs: number[]; - vertices: number[]; + roundPixels: boolean; - getBounds(matrix?: Matrix): Rectangle; + setProperties(properties: ParticleContainerProperties): void; + + } + export interface ParticleBuffer { + + gl: WebGLRenderingContext; + vertSize: number; + vertByteSize: number; + size: number; + dynamicProperties: any[]; + staticProperties: any[]; + + staticStride: number; + staticBuffer: any; + staticData: any; + dynamicStride: number; + dynamicBuffer: any; + dynamicData: any; + + initBuffers(): void; + bind(): void; + destroy(): void; + + } + export interface ParticleRenderer { + + } + export interface ParticleShader { } - export class Text extends Sprite { + //renderers - constructor(text: string, style?: TextStyle); + export interface RendererOptions { - static fontPropertiesCanvas: any; - static fontPropertiesContext: any; - static fontPropertiesCache: any; + view?: HTMLCanvasElement; + transparent?: boolean + antialias?: boolean; + resolution?: number; + clearBeforeRendering?: boolean; + preserveDrawingBuffer?: boolean; + forceFXAA?: boolean; + roundPixels?: boolean; + + } + export class SystemRenderer extends EventEmitter { + + protected _backgroundColor: number; + protected _backgroundColorRgb: number[]; + protected _backgroundColorString: string; + protected _tempDisplayObjectParent: any; + protected _lastObjectRendered: DisplayObject; + + constructor(system: string, width?: number, height?: number, options?: RendererOptions); + + type: number; + width: number; + height: number; + view: HTMLCanvasElement; + resolution: number; + transparent: boolean; + autoResize: boolean; + blendModes: any; //todo? + preserveDrawingBuffer: boolean; + clearBeforeRender: boolean; + backgroundColor: number; + + render(object: DisplayObject): void; + resize(width: number, height: number): void; + destroy(removeView?: boolean): void; + + } + export class CanvasRenderer extends SystemRenderer { + + protected renderDisplayObject(displayObject: DisplayObject, context: CanvasRenderingContext2D): void; + protected _mapBlendModes(): void; + + constructor(width?: number, height?: number, options?: RendererOptions); context: CanvasRenderingContext2D; - resolution: number; - - destroy(destroyTexture: boolean): void; - setStyle(style: TextStyle): void; - setText(text: string): void; - - } - - export class Texture implements Mixin { - - static emptyTexture: Texture; - - static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: scaleModes): Texture; - static fromFrame(frameId: string): Texture; - static fromImage(imageUrl: string, crossorigin?: boolean, scaleMode?: scaleModes): Texture; - static addTextureToCache(texture: Texture, id: string): void; - static removeTextureFromCache(id: string): Texture; - - constructor(baseTexture: BaseTexture, frame?: Rectangle, crop?: Rectangle, trim?: Rectangle); - - baseTexture: BaseTexture; - crop: Rectangle; - frame: Rectangle; - height: number; - noFrame: boolean; - requiresUpdate: boolean; - trim: Point; - width: number; - scope: any; - valid: boolean; - - listeners(eventName: string): Function[]; - emit(eventName: string, data?: any): boolean; - dispatchEvent(eventName: string, data?: any): boolean; - on(eventName: string, fn: Function): Function; - addEventListener(eventName: string, fn: Function): Function; - once(eventName: string, fn: Function): Function; - off(eventName: string, fn: Function): Function; - removeAllEventListeners(eventName: string): void; - - destroy(destroyBase: boolean): void; - setFrame(frame: Rectangle): void; - - } - - export class TilingSprite extends Sprite { - - constructor(texture: Texture, width: number, height: number); - - blendMode: number; - texture: Texture; - tint: number; - tilePosition: Point; - tileScale: Point; - tileScaleOffset: Point; - - destroy(): void; - generateTilingTexture(forcePowerOfTwo?: boolean): void; - setTexture(texture: Texture): void; - - } - - export class TiltShiftFilter extends AbstractFilter { - - blur: number; - gradientBlur: number; - start: number; - end: number; - - } - - export class TiltShiftXFilter extends AbstractFilter { - - blur: number; - gradientBlur: number; - start: number; - end: number; - - updateDelta(): void; - - } - - export class TiltShiftYFilter extends AbstractFilter { - - blur: number; - gradientBlur: number; - start: number; - end: number; - - updateDelta(): void; - - } - - export class TwistFilter extends AbstractFilter { - - angle: number; - offset: Point; - radius: number; - - } - - export class VideoTexture extends BaseTexture { - - static baseTextureFromVideo(video: HTMLVideoElement, scaleMode: number): BaseTexture; - static textureFromVideo(video: HTMLVideoElement, scaleMode: number): Texture; - static fromUrl(videoSrc: string, scaleMode: number): Texture; - - autoUpdate: boolean; - - destroy(): void; - updateBound(): void; - onPlayStart(): void; - onPlayStop(): void; - onCanPlay(): void; - - } - - export class WebGLBlendModeManager { - + refresh: boolean; + maskManager: CanvasMaskManager; + roundPixels: boolean; + currentScaleMode: number; currentBlendMode: number; + smoothProperty: string; - destroy(): void; - setBlendMode(blendMode: number): boolean; - setContext(gl: WebGLRenderingContext): void; + render(object: DisplayObject): void; + resize(w: number, h: number): void; } + export class CanvasBuffer { - export class WebGLFastSpriteBatch { + protected clear(): void; - constructor(gl: CanvasRenderingContext2D); + constructor(width: number, height: number); - currentBatchSize: number; - currentBaseTexture: BaseTexture; - currentBlendMode: number; - renderSession: RenderSession; - drawing: boolean; - indexBuffer: any; - indices: number[]; - lastIndexCount: number; - matrix: Matrix; - maxSize: number; - shader: IPixiShader; - size: number; - vertexBuffer: any; - vertices: number[]; - vertSize: number; + canvas: HTMLCanvasElement; + context: CanvasRenderingContext2D; - end(): void; - begin(spriteBatch: SpriteBatch, renderSession: RenderSession): void; - destroy(removeView?: boolean): void; - flush(): void; - render(spriteBatch: SpriteBatch): void; - renderSprite(sprite: Sprite): void; - setContext(gl: WebGLRenderingContext): void; - start(): void; - stop(): void; - - } - - export class WebGLFilterManager { - - filterStack: AbstractFilter[]; - transparent: boolean; - offsetX: number; - offsetY: number; - - applyFilterPass(filter: AbstractFilter, filterArea: Texture, width: number, height: number): void; - begin(renderSession: RenderSession, buffer: ArrayBuffer): void; - destroy(): void; - initShaderBuffers(): void; - popFilter(): void; - pushFilter(filterBlock: FilterBlock): void; - setContext(gl: WebGLRenderingContext): void; - - } - - export class WebGLGraphics { - - static graphicsDataPool: any[]; - - static renderGraphics(graphics: Graphics, renderRession: RenderSession): void; - static updateGraphics(graphics: Graphics, gl: WebGLRenderingContext): void; - static switchMode(webGL: WebGLRenderingContext, type: number): any; //WebGLData - static buildRectangle(graphicsData: GraphicsData, webGLData: any): void; - static buildRoundedRectangle(graphicsData: GraphicsData, webGLData: any): void; - static quadraticBezierCurve(fromX: number, fromY: number, cpX: number, cpY: number, toX: number, toY: number): number[]; - static buildCircle(graphicsData: GraphicsData, webGLData: any): void; - static buildLine(graphicsData: GraphicsData, webGLData: any): void; - static buildComplexPoly(graphicsData: GraphicsData, webGLData: any): void; - static buildPoly(graphicsData: GraphicsData, webGLData: any): boolean; - - reset(): void; - upload(): void; - - } - - export class WebGLGraphicsData { - - constructor(gl: WebGLRenderingContext); - - gl: WebGLRenderingContext; - glPoints: any[]; - color: number[]; - points: any[]; - indices: any[]; - buffer: WebGLBuffer; - indexBuffer: WebGLBuffer; - mode: number; - alpha: number; - dirty: boolean; - - reset(): void; - upload(): void; - - } - - export class WebGLMaskManager { - - destroy(): void; - popMask(renderSession: RenderSession): void; - pushMask(maskData: any[], renderSession: RenderSession): void; - setContext(gl: WebGLRenderingContext): void; - - } - - export class WebGLRenderer implements PixiRenderer { - - static createWebGLTexture(texture: Texture, gl: WebGLRenderingContext): void; - - constructor(width?: number, height?: number, options?: PixiRendererOptions); - - autoResize: boolean; - clearBeforeRender: boolean; - contextLost: boolean; - contextLostBound: Function; - contextRestoreLost: boolean; - contextRestoredBound: Function; - height: number; - gl: WebGLRenderingContext; - offset: Point; - preserveDrawingBuffer: boolean; - projection: Point; - resolution: number; - renderSession: RenderSession; - shaderManager: WebGLShaderManager; - spriteBatch: WebGLSpriteBatch; - maskManager: WebGLMaskManager; - filterManager: WebGLFilterManager; - stencilManager: WebGLStencilManager; - blendModeManager: WebGLBlendModeManager; - transparent: boolean; - type: number; - view: HTMLCanvasElement; width: number; + height: number; - destroy(): void; - initContext(): void; - mapBlendModes(): void; - render(stage: Stage): void; - renderDisplayObject(displayObject: DisplayObject, projection: Point, buffer: WebGLBuffer): void; resize(width: number, height: number): void; - updateTexture(texture: Texture): void; + destroy(): void; + + } + export class CanvasGraphics { + + static renderGraphicsMask(graphics: Graphics, context: CanvasRenderingContext2D): void; + static updateGraphicsTint(graphics: Graphics): void; + + static renderGraphics(graphics: Graphics, context: CanvasRenderingContext2D): void; + + } + export class CanvasMaskManager { + + pushMask(maskData: any, renderer: WebGLRenderer | CanvasRenderer): void; + popMask(renderer: WebGLRenderer | CanvasRenderer): void; + destroy(): void; + + } + export class CanvasTinter { + + static getTintedTexture(sprite: DisplayObject, color: number): HTMLCanvasElement; + static tintWithMultiply(texture: Texture, color: number, canvas: HTMLDivElement): void; + static tintWithOverlay(texture: Texture, color: number, canvas: HTMLCanvasElement): void; + static tintWithPerPixel(texture: Texture, color: number, canvas: HTMLCanvasElement): void; + static roundColor(color: number): number; + static cacheStepsPerColorChannel: number; + static convertTintToImage: boolean; + static vanUseMultiply: boolean; + static tintMethod: Function; + + } + export class WebGLRenderer extends SystemRenderer { + + protected _useFXAA: boolean; + protected _FXAAFilter: filters.FXAAFilter; + protected _contextOptions: { + alpha: boolean; + antiAlias: boolean; + premultipliedAlpha: boolean; + stencil: boolean; + preseveDrawingBuffer: boolean; + } + protected _renderTargetStack: RenderTarget[]; + + protected _initContext(): void; + protected _createContext(): void; + protected handleContextLost: (event: WebGLContextEvent) => void; + protected _mapGlModes(): void; + + constructor(width?: number, height?: number, options?: RendererOptions); + + drawCount: number; + shaderManager: ShaderManager; + maskManager: MaskManager; + stencilManager: StencilManager; + filterManager: FilterManager; + blendModeManager: BlendModeManager; + currentRenderTarget: RenderTarget; + currentRenderer: ObjectRenderer; + + render(object: DisplayObject): void; + renderDisplayObject(displayObject: DisplayObject, renderTarget: RenderTarget, clear: boolean): void; + setObjectRenderer(objectRenderer: ObjectRenderer): void; + setRenderTarget(renderTarget: RenderTarget): void; + updateTexture(texture: BaseTexture | Texture): BaseTexture | Texture; + destroyTexture(texture: BaseTexture | Texture): void; + + } + export class AbstractFilter { + + protected vertexSrc: string[]; + protected fragmentSrc: string[]; + + constructor(vertexSrc?: string | string[], fragmentSrc?: string | string[], uniforms?: any); + + uniforms: any; + + padding: number; + + getShader(renderer: WebGLRenderer): Shader; + applyFilter(renderer: WebGLRenderer, input: RenderTarget, output: RenderTarget, clear?: boolean): void; + syncUniform(uniform: WebGLUniformLocation): void; + + } + export class SpriteMaskFilter extends AbstractFilter { + + constructor(sprite: Sprite); + + maskSprite: Sprite; + maskMatrix: Matrix; + + applyFilter(renderer: WebGLRenderbuffer, input: RenderTarget, output: RenderTarget): void; + map: Texture; + offset: Point; + + } + export class BlendModeManager extends WebGLManager { + + constructor(renderer: WebGLRenderer); + + setBlendMode(blendMode: number): boolean; } - export class WebGLShaderManager { + export class FilterManager extends WebGLManager { + + constructor(renderer: WebGLRenderer); + + filterStack: any[]; + renderer: WebGLRenderer; + texturePool: any[]; + + onContextChange: () => void; + setFilterStack(filterStack: any[]): void; + pushFilter(target: RenderTarget, filters: any[]): void; + popFilter(): AbstractFilter; + getRenderTarget(clear?: boolean): RenderTarget; + protected returnRenderTarget(renderTarget: RenderTarget): void; + applyFilter(shader: Shader, inputTarget: RenderTarget, outputTarget: RenderTarget, clear?: boolean): void; + calculateMappedMatrix(filterArea: Rectangle, sprite: Sprite, outputMatrix?: Matrix): Matrix; + capFilterArea(filterArea: Rectangle): void; + resize(width: number, height: number): void; + destroy(): void; + + } + + export class MaskManager extends WebGLManager { + + stencilStack: StencilMaskStack; + reverse: boolean; + count: number; + alphaMaskPool: any[]; + + pushMask(target: RenderTarget, maskData: any): void; + popMask(target: RenderTarget, maskData: any): void; + pushSpriteMask(target: RenderTarget, maskData: any): void; + popSpriteMask(): void; + pushStencilMask(target: RenderTarget, maskData: any): void; + popStencilMask(target: RenderTarget, maskData: any): void; + + } + export class ShaderManager extends WebGLManager { + + protected _currentId: number; + protected currentShader: Shader; + + constructor(renderer: WebGLRenderer); maxAttibs: number; attribState: any[]; - stack: any[]; tempAttribState: any[]; + stack: any[]; + setAttribs(attribs: any[]): void; + setShader(shader: Shader): boolean; destroy(): void; - setAttribs(attribs: ShaderAttribute[]): void; - setContext(gl: WebGLRenderingContext): void; - setShader(shader: IPixiShader): boolean; } + export class StencilManager extends WebGLManager { - export class WebGLStencilManager { + constructor(renderer: WebGLRenderer); + + setMaskStack(stencilMaskStack: StencilMaskStack): void; + pushStencil(graphics: Graphics, webGLData: WebGLGraphicsData): void; + bindGraphics(graphics: Graphics, webGLData: WebGLGraphicsData): void; + popStencil(graphics: Graphics, webGLData: WebGLGraphicsData): void; + destroy(): void; + pushMask(maskData: any[]): void; + popMask(maskData: any[]): void; + + } + export class WebGLManager { + + protected onContextChange: () => void; + + constructor(renderer: WebGLRenderer); + + renderer: WebGLRenderer; + + destroy(): void; + + } + export class Shader { + + protected attributes: any; + protected textureCount: number; + protected uniforms: any; + + protected _glCompile(type: any, src: any): Shader; + + constructor(shaderManager: ShaderManager, vertexSrc: string, fragmentSrc: string, uniforms: any, attributes: any); + + uuid: number; + gl: WebGLRenderingContext; + shaderManager: ShaderManager; + program: WebGLProgram; + vertexSrc: string; + fragmentSrc: string; + + init(): void; + cachUniformLocations(keys: string): void; + cacheAttributeLocations(keys: string): void; + compile(): WebGLProgram; + syncUniform(uniform: any): void; + syncUniforms(): void; + initSampler2D(uniform: any): void; + destroy(): void; + + } + export class ComplexPrimitiveShader extends Shader { + + constructor(shaderManager: ShaderManager); + + } + export class PrimitiveShader extends Shader { + + constructor(shaderManager: ShaderManager); + + } + export class TextureShader extends Shader { + + constructor(shaderManager: ShaderManager, vertexSrc?: string, fragmentSrc?: string, customUniforms?: any, customAttributes?: any); + + } + export interface StencilMaskStack { stencilStack: any[]; reverse: boolean; count: number; - bindGraphics(graphics: Graphics, webGLData: any[], renderSession: RenderSession): void; - destroy(): void; - popStencil(graphics: Graphics, webGLData: any[], renderSession: RenderSession): void; - pushStencil(graphics: Graphics, webGLData: any[], renderSession: RenderSession): void; - setContext(gl: WebGLRenderingContext): void; - } + export class ObjectRenderer extends WebGLManager { - export class WebGLSpriteBatch { - - blendModes: number[]; - colors: number[]; - currentBatchSize: number; - currentBaseTexture: Texture; - defaultShader: AbstractFilter; - dirty: boolean; - drawing: boolean; - indices: number[]; - lastIndexCount: number; - positions: number[]; - textures: Texture[]; - shaders: IPixiShader[]; - size: number; - sprites: any[]; //todo Sprite[]? - vertices: number[]; - vertSize: number; - - begin(renderSession: RenderSession): void; - destroy(): void; - end(): void; - flush(shader?: IPixiShader): void; - render(sprite: Sprite): void; - renderBatch(texture: Texture, size: number, startIndex: number): void; - renderTilingSprite(sprite: TilingSprite): void; - setBlendMode(blendMode: blendModes): void; - setContext(gl: WebGLRenderingContext): void; start(): void; stop(): void; + flush(): void; + render(object?: any): void; + + } + export class RenderTarget { + + constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number, resolution: number, root: boolean); + + gl: WebGLRenderingContext; + frameBuffer: WebGLFramebuffer; + texture: Texture; + size: Rectangle; + resolution: number; + projectionMatrix: Matrix; + transform: Matrix; + frame: Rectangle; + stencilBuffer: WebGLRenderbuffer; + stencilMaskStack: StencilMaskStack; + filterStack: any[]; + scaleMode: number; + root: boolean; + + clear(bind?: boolean): void; + attachStencilBuffer(): void; + activate(): void; + calculateProjection(protectionFrame: Matrix): void; + resize(width: number, height: number): void; + destroy(): void; + + } + export interface Quad { + + gl: WebGLRenderingContext; + vertices: number[]; + uvs: number[]; + colors: number[]; + indices: number[]; + vertexBuffer: WebGLBuffer; + indexBuffer: WebGLBuffer; + + map(rect: Rectangle, rect2: Rectangle): void; + upload(): void; } + //sprites + + export class Sprite extends Container { + + static fromFrame(frameId: string): Sprite; + static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite; + + protected _texture: Texture; + protected _width: number; + protected _height: number; + protected cachedTint: number; + + protected _onTextureUpdate(): void; + + constructor(texture?: Texture); + + anchor: Point; + tint: number; + blendMode: number; + shader: Shader; + texture: Texture; + + width: number; + height: number; + + getBounds(matrix?: Matrix): Rectangle; + getLocalBounds(): Rectangle; + containsPoint(point: Point): boolean; + destroy(destroyTexture?: boolean, destroyBaseTexture?: boolean): void; + + } + export class SpriteRenderer extends ObjectRenderer { + + protected renderBatch(texture: Texture, size: number, startIndex: number): void; + + vertSize: number; + vertByteSize: number; + size: number; + vertices: number[]; + positions: number[]; + colors: number[]; + indices: number[]; + currentBatchSize: number; + sprites: Sprite[]; + shader: Shader; + + render(sprite: Sprite): void; + flush(): void; + start(): void; + destroy(): void; + + } + + //text + + export interface TextStyle { + + font?: string; + fill?: string | number; + align?: string; + stroke?: string | number; + strokeThickness?: number; + wordWrap?: boolean; + wordWrapWidth?: number; + lineHeight?: number; + dropShadow?: boolean; + dropShadowColor?: string | number; + dropShadowAngle?: number; + dropShadowDistance?: number; + padding?: number; + textBaseline?: string; + lineJoin?: string; + miterLimit?: number; + + } + export class Text extends Sprite { + + static fontPropertiesCache: any; + static fontPropertiesCanvas: HTMLCanvasElement; + static fontPropertiesContext: CanvasRenderingContext2D; + + protected _text: string; + protected _style: TextStyle; + + protected updateText(): void; + protected updateTexture(): void; + protected determineFontProperties(fontStyle: TextStyle): TextStyle; + protected wordWrap(text: string): boolean; + + constructor(text?: string, style?: TextStyle, resolution?: number); + + canvas: HTMLCanvasElement; + context: CanvasRenderingContext2D; + dirty: boolean; + resolution: number; + text: string; + style: TextStyle; + + width: number; + height: number; + + } + + //textures + + export class BaseTexture extends EventEmitter { + + static fromImage(imageUrl: string, crossorigin?: boolean, scaleMode?: number): BaseTexture; + static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): BaseTexture; + + protected _glTextures: any[]; + + protected _sourceLoaded(): void; + + constructor(source: HTMLImageElement | HTMLCanvasElement, scaleMode?: number, resolution?: number); + + uuid: number; + resolution: number; + width: number; + height: number; + realWidth: number; + realHeight: number; + scaleMode: number; + hasLoaded: boolean; + isLoading: boolean; + source: HTMLImageElement | HTMLCanvasElement; + premultipliedAlpha: boolean; + imageUrl: string; + isPowerOfTwo: boolean; + mipmap: boolean; + + update(): void; + loadSource(source: HTMLImageElement | HTMLCanvasElement): void; + destroy(): void; + dispose(): void; + updateSourceImage(newSrc: string): void; + + on(event: 'dispose', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + on(event: 'error', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + on(event: 'loaded', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + on(event: 'update', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + on(event: string, fn: Function, context?: any): EventEmitter; + + once(event: 'dispose', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + once(event: 'error', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + once(event: 'loaded', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + once(event: 'update', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + + } export class RenderTexture extends Texture { - constructor(width?: number, height?: number, renderer?: PixiRenderer, scaleMode?: scaleModes, resolution?: number); + protected renderWebGL(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void; + protected renderCanvas(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void; - frame: Rectangle; - baseTexture: BaseTexture; - renderer: PixiRenderer; + constructor(renderer: CanvasRenderer | WebGLRenderer, width?: number, height?: number, scaleMode?: number, resolution?: number); + + width: number; + height: number; resolution: number; + renderer: CanvasRenderer | WebGLRenderer; valid: boolean; + render(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void; + resize(width: number, height: number, updateBase?: boolean): void; clear(): void; + destroy(): void; + getImage(): HTMLImageElement; + getPixels(): number[]; + getPixel(x: number, y: number): number[]; getBase64(): string; getCanvas(): HTMLCanvasElement; - getImage(): HTMLImageElement; - resize(width: number, height: number, updateBase: boolean): void; - render(displayObject: DisplayObject, position?: Point, clear?: boolean): void; } - - //SPINE - - export class BoneData { - - constructor(name: string, parent?: any); - - name: string; - parent: any; - length: number; - x: number; - y: number; - rotation: number; - scaleX: number; - scaleY: number; - - } - - export class SlotData { - - constructor(name: string, boneData: BoneData); - - name: string; - boneData: BoneData; - r: number; - g: number; - b: number; - a: number; - attachmentName: string; - - } - - export class Bone { - - constructor(boneData: BoneData, parent?: any); - - data: BoneData; - parent: any; - yDown: boolean; - x: number; - y: number; - rotation: number; - scaleX: number; - scaleY: number; - worldRotation: number; - worldScaleX: number; - worldScaleY: number; - - updateWorldTransform(flipX: boolean, flip: boolean): void; - setToSetupPose(): void; - - } - - export class Slot { - - constructor(slotData: SlotData, skeleton: Skeleton, bone: Bone); - - data: SlotData; - skeleton: Skeleton; - bone: Bone; - r: number; - g: number; - b: number; - a: number; - attachment: RegionAttachment; - setAttachment(attachment: RegionAttachment): void; - setAttachmentTime(time: number): void; - getAttachmentTime(): number; - setToSetupPose(): void; - - } - - export class Skin { - - constructor(name: string); - - name: string; - attachments: any; - - addAttachment(slotIndex: number, name: string, attachment: RegionAttachment): void; - getAttachment(slotIndex: number, name: string): void; - - } - - export class Animation { - - constructor(name: string, timelines: ISpineTimeline[], duration: number); - - name: string; - timelines: ISpineTimeline[]; - duration: number; - apply(skeleton: Skeleton, time: number, loop: boolean): void; - min(skeleton: Skeleton, time: number, loop: boolean, alpha: number): void; - - } - - export class Curves { - - constructor(frameCount: number); - - curves: number[]; - - setLinear(frameIndex: number): void; - setStepped(frameIndex: number): void; - setCurve(frameIndex: number, cx1: number, cy1: number, cx2: number, cy2: number): void; - getCurvePercent(frameIndex: number, percent: number): number; - - } - - export interface ISpineTimeline { - - curves: Curves; - frames: number[]; - - getFrameCount(): number; - apply(skeleton: Skeleton, time: number, alpha: number): void; - - } - - export class RotateTimeline implements ISpineTimeline { - - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - boneIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, angle: number): void; - apply(skeleton: Skeleton, time: number, alpha: number): void; - - } - - export class TranslateTimeline implements ISpineTimeline { - - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - boneIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, x: number, y: number): void; - apply(skeleton: Skeleton, time: number, alpha: number): void; - - } - - export class ScaleTimeline implements ISpineTimeline { - - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - boneIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, x: number, y: number): void; - apply(skeleton: Skeleton, time: number, alpha: number): void; - - } - - export class ColorTimeline implements ISpineTimeline { - - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - boneIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, r: number, g: number, b: number, a: number): void; - apply(skeleton: Skeleton, time: number, alpha: number): void; - - } - - export class AttachmentTimeline implements ISpineTimeline { - - constructor(frameCount: number); - - curves: Curves; - frames: number[]; - attachmentNames: string[]; - slotIndex: number; - - getFrameCount(): number; - setFrame(frameIndex: number, time: number, attachmentName: string): void; - apply(skeleton: Skeleton, time: number, alpha: number): void; - - } - - export class SkeletonData { - - bones: Bone[]; - slots: Slot[]; - skins: Skin[]; - animations: Animation[]; - defaultSkin: Skin; - - findBone(boneName: string): Bone; - findBoneIndex(boneName: string): number; - findSlot(slotName: string): Slot; - findSlotIndex(slotName: string): number; - findSkin(skinName: string): Skin; - findAnimation(animationName: string): Animation; - - } - - export class Skeleton { - - constructor(skeletonData: SkeletonData); - - data: SkeletonData; - bones: Bone[]; - slots: Slot[]; - drawOrder: any[]; - x: number; - y: number; - skin: Skin; - r: number; - g: number; - b: number; - a: number; - time: number; - flipX: boolean; - flipY: boolean; - - updateWorldTransform(): void; - setToSetupPose(): void; - setBonesToSetupPose(): void; - setSlotsToSetupPose(): void; - getRootBone(): Bone; - findBone(boneName: string): Bone; - fineBoneIndex(boneName: string): number; - findSlot(slotName: string): Slot; - findSlotIndex(slotName: string): number; - setSkinByName(skinName: string): void; - setSkin(newSkin: Skin): void; - getAttachmentBySlotName(slotName: string, attachmentName: string): RegionAttachment; - getAttachmentBySlotIndex(slotIndex: number, attachmentName: string): RegionAttachment; - setAttachment(slotName: string, attachmentName: string): void; - update(data: number): void; - - } - - export class RegionAttachment { - - offset: number[]; - uvs: number[]; - x: number; - y: number; - rotation: number; - scaleX: number; - scaleY: number; + export class Texture extends BaseTexture { + + static fromImage(imageUrl: string, crossOrigin?: boolean, scaleMode?: number): Texture; + static fromFrame(frameId: string): Texture; + static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): Texture; + static fromVideo(video: HTMLVideoElement | string, scaleMode?: number): Texture; + static fromVideoUrl(videoUrl: string, scaleMode?: number): Texture; + static addTextureToCache(texture: Texture, id: string): void; + static removeTextureFromCache(id: string): Texture; + static EMPTY: Texture; + + protected _frame: Rectangle; + protected _uvs: TextureUvs; + + protected onBaseTextureUpdated(baseTexture: BaseTexture): void; + protected onBaseTextureLoaded(baseTexture: BaseTexture): void; + protected _updateUvs(): void; + + constructor(baseTexture: BaseTexture, frame?: Rectangle, crop?: Rectangle, trim?: Rectangle, rotate?: boolean); + + noFrame: boolean; + baseTexture: BaseTexture; + trim: Rectangle; + valid: boolean; + requiresUpdate: boolean; width: number; height: number; - rendererObject: any; - regionOffsetX: number; - regionOffsetY: number; - regionWidth: number; - regionHeight: number; - regionOriginalWidth: number; - regionOriginalHeight: number; - - setUVs(u: number, v: number, u2: number, v2: number, rotate: number): void; - updateOffset(): void; - computeVertices(x: number, y: number, bone: Bone, vertices: number[]): void; - - } - - export class AnimationStateData { - - constructor(skeletonData: SkeletonData); - - skeletonData: SkeletonData; - animationToMixTime: any; - defaultMix: number; - - setMixByName(fromName: string, toName: string, duration: number): void; - setMix(from: string, to: string): number; - - } - - export class AnimationState { - - constructor(stateData: any); - - animationSpeed: number; - current: any; - previous: any; - currentTime: number; - previousTime: number; - currentLoop: boolean; - previousLoop: boolean; - mixTime: number; - mixDuration: number; - queue: Animation[]; - - update(delta: number): void; - apply(skeleton: any): void; - clearAnimation(): void; - setAnimation(animation: any, loop: boolean): void; - setAnimationByName(animationName: string, loop: boolean): void; - addAnimationByName(animationName: string, loop: boolean, delay: number): void; - addAnimation(animation: any, loop: boolean, delay: number): void; - isComplete(): number; - - } - - export class SkeletonJson { - - constructor(attachmentLoader: AtlasAttachmentLoader); - - attachmentLoader: AtlasAttachmentLoader; - scale: number; - - readSkeletonData(root: any): SkeletonData; - readAttachment(skin: Skin, name: string, map: any): RegionAttachment; - readAnimation(name: string, map: any, skeletonData: SkeletonData): void; - readCurve(timeline: ISpineTimeline, frameIndex: number, valueMap: any): void; - toColor(hexString: string, colorIndex: number): number; - - } - - export class Atlas { - - static FORMAT: { - - alpha: number; - intensity: number; - luminanceAlpha: number; - rgb565: number; - rgba4444: number; - rgb888: number; - rgba8888: number; - - } - - static TextureFilter: { - - nearest: number; - linear: number; - mipMap: number; - mipMapNearestNearest: number; - mipMapLinearNearest: number; - mipMapNearestLinear: number; - mipMapLinearLinear: number; - - } - - static textureWrap: { - - mirroredRepeat: number; - clampToEdge: number; - repeat: number; - - } - - constructor(atlasText: string, textureLoader: AtlasLoader); - - textureLoader: AtlasLoader; - pages: AtlasPage[]; - regions: AtlasRegion[]; - - findRegion(name: string): AtlasRegion; - dispose(): void; - updateUVs(page: AtlasPage): void; - - } - - export class AtlasPage { - - name: string; - format: number; - minFilter: number; - magFilter: number; - uWrap: number; - vWrap: number; - rendererObject: any; - width: number; - height: number; - - } - - export class AtlasRegion { - - page: AtlasPage; - name: string; - x: number; - y: number; - width: number; - height: number; - u: number; - v: number; - u2: number; - v2: number; - offsetX: number; - offsetY: number; - originalWidth: number; - originalHeight: number; - index: number; + crop: Rectangle; rotate: boolean; - splits: any[]; - pads: any[]; + + frame: Rectangle; + + update(): void; + destroy(destroyBase?: boolean): void; + clone(): Texture; } + export class TextureUvs { - export class AtlasReader { + x0: number; + y0: number; + x1: number; + y1: number; + x2: number; + y2: number; + x3: number; + y3: number; - constructor(text: string); - - lines: string[]; - index: number; - - trim(value: string): string; - readLine(): string; - readValue(): string; - readTuple(tuple: number): number; + set(frame: Rectangle, baseFrame: Rectangle, rotate: boolean): void; } + export class VideoBaseTexture extends BaseTexture { - export class AtlasAttachmentLoader { + static fromVideo(video: HTMLVideoElement, scaleMode?: number): VideoBaseTexture; + static fromUrl(videoSrc: string | any | string[]| any[]): VideoBaseTexture; - constructor(atlas: Atlas); + protected _loaded: boolean; - atlas: Atlas; + protected _onUpdate(): void; + protected _onPlayStart(): void; + protected _onPlayStop(): void; + protected _onCanPlay(): void; - newAttachment(skin: Skin, type: number, name: string): RegionAttachment; - - } - - export class Spine extends DisplayObjectContainer { - - constructor(url: string); + constructor(source: HTMLVideoElement, scaleMode?: number); autoUpdate: boolean; - spineData: any; - skeleton: Skeleton; - stateData: AnimationStateData; - state: AnimationState; - slotContainers: DisplayObjectContainer[]; - createSprite(slot: Slot, descriptor: { name: string }): Sprite[]; - update(dt: number): void; + destroy(): void; } + //utils + + export class utils { + + static uuid(): number; + static hex2rgb(hex: number, out?: number[]): number[]; + static hex2String(hex: number): string; + static rbg2hex(rgb: Number[]): number; + static canUseNewCanvasBlendModel(): boolean; + static getNextPowerOfTwo(number: number): number; + static isPowerOfTwo(width: number, height: number): boolean; + static getResolutionOfUrl(url: string): boolean; + static sayHello(type: string): void; + static isWebGLSupported(): boolean; + static sign(n: number): number; + static TextureCache: any; + static BaseTextureCache: any; + + } + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////EXTRAS//////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module extras { + + export interface BitmapTextStyle { + + font?: string | { + + name?: string; + size?: number; + + }; + align?: string; + tint?: number; + + } + export class BitmapText extends Container { + + static fonts: any; + + protected _glyphs: Sprite[]; + protected _font: string | { + tint: number; + align: string; + name: string; + size: number; + } + protected _text: string; + + protected updateText(): void; + + constructor(text: string, style?: BitmapTextStyle); + + textWidth: number; + textHeight: number; + maxWidth: number; + dirty: boolean; + + tint: number; + align: string; + font: string | { + tint: number; + align: string; + name: string; + size: number; + } + text: string; + + } + export class MovieClip extends Sprite { + + static fromFrames(frame: string[]): MovieClip; + static fromImages(images: string[]): MovieClip; + + protected _textures: Texture; + protected _currentTime: number; + + protected update(deltaTime: number): void; + + constructor(textures: Texture[]); + + animationSpeed: number; + loop: boolean; + onComplete: () => void; + currentFrame: number; + playing: boolean; + + totalFrames: number; + textures: Texture[]; + + stop(): void; + play(): void; + gotoAndStop(frameName: number): void; + gotoAndPlay(frameName: number): void; + destroy(): void; + + } + export class TilingSprite extends Sprite { + + //This is really unclean but is the only way :( + //See http://stackoverflow.com/questions/29593905/typescript-declaration-extending-class-with-static-method/29595798#29595798 + //Thanks bas! + static fromFrame(frameId: string): Sprite; + static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite; + + static fromFrame(frameId: string, width?: number, height?: number): TilingSprite; + static fromImage(imageId: string, width?: number, height?: number, crossorigin?: boolean, scaleMode?: number): TilingSprite; + + protected _tileScaleOffset: Point; + protected _tilingTexture: boolean; + protected _refreshTexture: boolean; + protected _uvs: TextureUvs[]; + + constructor(texture: Texture, width: number, height: number); + + tileScale: Point; + tilePosition: Point; + + width: number; + height: number; + originalTexture: Texture; + + getBounds(): Rectangle; + generateTilingTexture(renderer: WebGLRenderer | CanvasRenderer, texture: Texture, forcePowerOfTwo?: boolean): Texture; + containsPoint(point: Point): boolean; + destroy(): void; + + } + + } + + ////////////////////////////////////////////////////////////////////////////// + ///////////////////////////////FILTERS//////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + module filters { + + export class AsciiFilter extends AbstractFilter { + size: number; + } + export class BloomFilter extends AbstractFilter { + + blur: number; + blurX: number; + blurY: number; + + } + export class BlurFilter extends AbstractFilter { + + protected blurXFilter: BlurXFilter; + protected blurYFilter: BlurYFilter; + + blur: number; + passes: number; + blurX: number; + blurY: number; + + } + export class BlurXFilter extends AbstractFilter { + + passes: number; + strength: number; + blur: number; + + } + export class BlurYFilter extends AbstractFilter { + + passes: number; + strength: number; + blur: number; + + } + export class SmartBlurFilter extends AbstractFilter { + + } + export class ColorMatrixFilter extends AbstractFilter { + + protected _loadMatrix(matrix: number[], multiply: boolean): void; + protected _multiply(out: number[], a: number[], b: number[]): void; + protected _colorMatrix(matrix: number[]): void; + + matrix: number[]; + + brightness(b: number, multiply?: boolean): void; + greyscale(scale: number, multiply?: boolean): void; + blackAndWhite(multiply?: boolean): void; + hue(rotation: number, multiply?: boolean): void; + contrast(amount: number, multiply?: boolean): void; + saturate(amount: number, multiply?: boolean): void; + desaturate(multiply?: boolean): void; + negative(multiply?: boolean): void; + sepia(multiply?: boolean): void; + technicolor(multiply?: boolean): void; + polaroid(multiply?: boolean): void; + toBGR(multiply?: boolean): void; + kodachrome(multiply?: boolean): void; + browni(multiply?: boolean): void; + vintage(multiply?: boolean): void; + colorTone(desaturation: number, toned: number, lightColor: string, darkColor: string, multiply?: boolean): void; + night(intensity: number, multiply?: boolean): void; + predator(amount: number, multiply?: boolean): void; + lsd(multiply?: boolean): void; + reset(): void; + + } + export class ColorStepFilter extends AbstractFilter { + + step: number; + + } + export class ConvolutionFilter extends AbstractFilter { + + constructor(matrix: number[], width: number, height: number); + + matrix: number[]; + width: number; + height: number; + + } + export class CrossHatchFilter extends AbstractFilter { + + } + export class DisplacementFilter extends AbstractFilter { + + constructor(sprite: Sprite, scale?: number); + + map: Texture; + + scale: Point; + + } + export class DotScreenFilter extends AbstractFilter { + + scale: number; + angle: number; + + } + export class BlurYTintFilter extends AbstractFilter { + + blur: number; + + } + export class DropShadowFilter extends AbstractFilter { + + blur: number; + blurX: number; + blurY: number; + color: number; + alpha: number; + distance: number; + angle: number; + + } + export class GrayFilter extends AbstractFilter { + + gray: number; + + } + export class InvertFilter extends AbstractFilter { + + invert: number; + + } + export class NoiseFilter extends AbstractFilter { + + noise: number; + + } + export class PixelateFilter extends AbstractFilter { + + size: Point; + + } + export class RGBSplitFilter extends AbstractFilter { + + red: number; + green: number; + blue: number; + + } + export class SepiaFilter extends AbstractFilter { + + sepia: number; + + } + export class ShockwaveFilter extends AbstractFilter { + + center: number[]; + params: any; + time: number; + + } + export class TiltShiftAxisFilter extends AbstractFilter { + + blur: number; + gradientBlur: number; + start: number; + end: number; + + updateDelta(): void; + + } + export class TiltShiftFilter extends AbstractFilter { + + blur: number; + gradientBlur: number; + start: number; + end: number; + + } + export class TiltShiftXFilter extends AbstractFilter { + + updateDelta(): void; + + } + export class TiltShiftYFilter extends AbstractFilter { + + updateDelta(): void; + + } + export class TwistFilter extends AbstractFilter { + + offset: Point; + radius: number; + angle: number; + + } + export class FXAAFilter extends AbstractFilter { + + applyFilter(renderer: WebGLRenderer, input: RenderTarget, output: RenderTarget): void; + + } + } + + ////////////////////////////////////////////////////////////////////////////// + ////////////////////////////INTERACTION/////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module interaction { + + export interface InteractionEvent { + + stopped: boolean; + target: any; + type: string; + data: InteractionData; + stopPropagation(): void; + + } + + export class InteractionData { + + global: Point; + target: DisplayObject; + originalEvent: Event; + + getLocalPosition(displayObject: DisplayObject, point?: Point, globalPos?: Point): Point; + + } + + export class InteractionManager { + + protected interactionDOMElement: HTMLElement; + protected eventsAdded: boolean; + protected _tempPoint: Point; + + protected setTargetElement(element: HTMLElement, resolution: number): void; + protected addEvents(): void; + protected removeEvents(): void; + protected dispatchEvent(displayObject: DisplayObject, eventString: string, eventData: any): void; + protected onMouseDown: (event: Event) => void; + protected processMouseDown: (displayObject: DisplayObject, hit: boolean) => void; + protected onMouseUp: (event: Event) => void; + protected processMouseUp: (displayObject: DisplayObject, hit: boolean) => void; + protected onMouseMove: (event: Event) => void; + protected processMouseMove: (displayObject: DisplayObject, hit: boolean) => void; + protected onMouseOut: (event: Event) => void; + protected processMouseOverOut: (displayObject: DisplayObject, hit: boolean) => void; + protected onTouchStart: (event: Event) => void; + protected processTouchStart: (DisplayObject: DisplayObject, hit: boolean) => void; + protected onTouchEnd: (event: Event) => void; + protected processTouchEnd: (displayObject: DisplayObject, hit: boolean) => void; + protected onTouchMove: (event: Event) => void; + protected processTouchMove: (displayObject: DisplayObject, hit: boolean) => void; + protected getTouchData(touchEvent: InteractionData): InteractionData; + protected returnTouchData(touchData: InteractionData): void; + + constructor(renderer: CanvasRenderer | WebGLRenderer, options?: { autoPreventDefault?: boolean; interactionFrequence?: number; }); + + renderer: CanvasRenderer | WebGLRenderer; + autoPreventDefault: boolean; + interactionFrequency: number; + mouse: InteractionData; + eventData: { + stopped: boolean; + target: any; + type: any; + data: InteractionData; + }; + interactiveDataPool: InteractionData[]; + last: number; + currentCursorStyle: string; + resolution: number; + update(deltaTime: number): void; + + mapPositionToPoint(point: Point, x: number, y: number): void; + processInteractive(point: Point, displayObject: DisplayObject, func: (displayObject: DisplayObject, hit: boolean) => void, hitTest: boolean, interactive: boolean): boolean; + destroy(): void; + + } + + export interface InteractiveTarget { + + interactive: boolean; + buttonMode: boolean; + interactiveChildren: boolean; + defaultCursor: string; + hitArea: HitArea; + + } + + } + + ////////////////////////////////////////////////////////////////////////////// + ///////////////////////////////LOADER///////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + //https://github.com/englercj/resource-loader/blob/master/src/Loader.js + + export module loaders { + export interface LoaderOptions { + + crossOrigin?: boolean; + loadType?: number; + xhrType?: string; + + } + export class Loader extends EventEmitter { + + constructor(baseUrl?: string, concurrency?: number); + + baseUrl: string; + progress: number; + loading: boolean; + resources: Resource[]; + + add(name: string, url: string, options?: LoaderOptions, cb?: () => void): Loader; + add(url: string, options?: LoaderOptions, cb?: () => void): Loader; + //todo I am not sure of object literal notional (or its options) so just allowing any but would love to improve this + add(obj: any, options?: LoaderOptions, cb?: () => void): Loader; + + on(event: 'complete', fn: (loader: loaders.Loader, object: any) => void, context?: any): EventEmitter; + on(event: 'error', fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + on(event: 'load', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + on(event: 'progress', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + on(event: 'start', fn: (loader: loaders.Loader) => void, context?: any): EventEmitter; + on(event: string, fn: Function, context?: any): EventEmitter; + + once(event: 'complete', fn: (loader: loaders.Loader, object: any) => void, context?: any): EventEmitter; + once(event: 'error', fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + once(event: 'load', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + once(event: 'progress', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter; + once(event: 'start', fn: (loader: loaders.Loader) => void, context?: any): EventEmitter; + once(event: string, fn: Function, context?: any): EventEmitter; + + before(fn: Function): Loader; + pre(fn: Function): Loader; + + after(fn: Function): Loader; + use(fn: Function): Loader; + + reset(): void; + + load(cb?: (loader: loaders.Loader, object: any) => void): Loader; + + } + export class Resource extends EventEmitter { + + static LOAD_TYPE: { + XHR: number; + IMAGE: number; + AUDIO: number; + VIDEO: number; + }; + + static XHR_READ_STATE: { + UNSENT: number; + OPENED: number; + HEADERS_RECIEVED: number; + LOADING: number; + DONE: number; + }; + + static XHR_RESPONSE_TYPE: { + DEFAULT: number; + BUFFER: number; + BLOB: number; + DOCUMENT: number; + JSON: number; + TEXT: number; + }; + + constructor(name?: string, url?: string | string[], options?: LoaderOptions); + + name: string; + texture: Texture; + url: string; + data: any; + crossOrigin: string; + loadType: number; + xhrType: string; + error: Error; + xhr: XMLHttpRequest; + + complete(): void; + load(cb?: () => void): void; + + } + } + + ////////////////////////////////////////////////////////////////////////////// + ///////////////////////////////MESH/////////////////////////////////////////// + ////////////////////////////////////////////////////////////////////////////// + + export module mesh { + + export class Mesh extends Container { + + static DRAW_MODES: { + TRIANGLE_MESH: number; + TRIANGLES: number; + } + + constructor(texture: Texture, vertices?: number[], uvs?: number[], indices?: number[], drawMode?: number); + + texture: Texture; + uvs: number[]; + vertices: number[]; + indices: number[]; + dirty: boolean; + blendMode: number; + canvasPadding: number; + drawMode: number; + + getBounds(matrix?: Matrix): Rectangle; + containsPoint(point: Point): boolean; + + protected _texture: Texture; + + protected _renderCanvasTriangleMesh(context: CanvasRenderingContext2D): void; + protected _renderCanvasTriangles(context: CanvasRenderingContext2D): void; + protected _renderCanvasDrawTriangle(context: CanvasRenderingContext2D, vertices: number, uvs: number, index0: number, index1: number, index2: number): void; + protected renderMeshFlat(Mesh: Mesh): void; + protected _onTextureUpdate(): void; + + } + export class Rope extends Mesh { + + protected _ready: boolean; + + protected getTextureUvs(): TextureUvs; + + constructor(texture: Texture, points: Point[]); + + points: Point[]; + colors: number[]; + + refresh(): void; + + } + + export class MeshRenderer extends ObjectRenderer { + + protected _initWebGL(mesh: Mesh): void; + + indices: number[]; + + constructor(renderer: WebGLRenderer); + + render(mesh: Mesh): void; + flush(): void; + start(): void; + destroy(): void; + + } + + export interface MeshShader extends Shader { } + + } + + module ticker { + + export var shared: Ticker; + + export class Ticker { + + protected _tick(time: number): void; + protected _emitter: EventEmitter; + protected _requestId: number; + protected _maxElapsedMS: number; + + protected _requestIfNeeded(): void; + protected _cancelIfNeeded(): void; + protected _startIfPossible(): void; + + autoStart: boolean; + deltaTime: number; + elapsedMS: number; + lastTime: number; + speed: number; + started: boolean; + + FPS: number; + minFPS: number; + + add(fn: (deltaTime: number) => void, context?: any): Ticker; + addOnce(fn: (deltaTime: number) => void, context?: any): Ticker; + remove(fn: (deltaTime: number) => void, context?: any): Ticker; + start(): void; + stop(): void; + update(): void; + + } + + } } -declare function requestAnimFrame(callback: Function): void; - -declare module PIXI.PolyK { - export function Triangulate(p: number[]): number[]; +declare module 'pixi.js' { + export = PIXI; } \ No newline at end of file diff --git a/pixi.js/pixi.js.d.ts.tscparams b/pixi.js/pixi.js.d.ts.tscparams deleted file mode 100644 index d3f5a12fa..000000000 --- a/pixi.js/pixi.js.d.ts.tscparams +++ /dev/null @@ -1 +0,0 @@ -